欢迎光临黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

巧用CSS3的after伪类添加横线

时间:2019-09-19   来源:网站建设

在网站建设开发的过程中,有时候我们需要给一些文字添加下横线或者左右的横线。这个时候我们可以使用不常见的伪类:after


例如:我们先写一个A标签

   <a >Welcome to</a>

然后给A一个CSS样式

     
 a{position: relative;}
        
 a:after{     
content:"";
display: inline-block;
position: absolute;
top:30px;
left: 0px;
width: 80px;
height: 2px;
background-color: red;
}
    </style>

得到的效果如图所示。

QQ截图20190919111243.jpg

在网站建设中,我们有时候需要在文字中间划一条横线。根据以上的代码,我们只需要将横线的位置作调整。

top:10px;

就可以得到如下效果

2.jpg

是不是很简单。

如果你平时也是一个前端开发人员,欢迎留言发现你的高见。我们是深圳佐岸视觉网站建设。

本文标签: 网站建设
新闻推荐
蛇口高端品牌网站开发价格
蛇口高端品牌网站开发价格

蛇口高端品牌网站开发价格其次,网站建设的售后服务也非常完善。例如,站,可以及时解决浏览器兼容性问题或...

西乡网站制作多少钱
西乡网站制作多少钱

西乡网站制作多少钱工作中包含的内容很多,关键词的选择要谨慎细致,要注意定期更换,注意对流量多做分析,...

公明手机网站制作哪个好
公明手机网站制作哪个好

公明手机网站制作哪个好对于多次单击页面而没有看到所需内容的用户,站。的终页面的逻辑和物理结构应遵循次...

沙井网站外包哪个公司好
沙井网站外包哪个公司好

沙井网站外包哪个公司好第二在,群聊,邮件,贴吧等地站,把的优势要充分的推销给客户。第三:搜索引擎排名,...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top