码迷,mamicode.com
首页 > Web开发 > 详细

中间文字,两边横线(纯css实现)

时间:2020-06-18 10:25:19      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:round   wrap   ext   bsp   enter   用法   实现   content   before   

偏爱这个办法 

        .wrap {position: relative;text-align: center;width: 84%;margin: 15px auto;}
        /*CSS伪类用法*/
        .wrap:after, .wrap:before {position: absolute;top: 50%;background: #ddd;content: "";height: 1px;width: 25%;}
        /*调整背景横线的左右距离*/
        .wrap:before {left: 0;}
        .wrap:after {right: 0;}
<!--3:使用css伪类-->
<div class="wrap">
    中间文字 两边横线
</div>

中间文字,两边横线(纯css实现)

标签:round   wrap   ext   bsp   enter   用法   实现   content   before   

原文地址:https://www.cnblogs.com/ziyoujike/p/13155980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!