码迷,mamicode.com
首页 > 其他好文 > 详细

文字两边的横线实现

时间:2017-03-16 20:07:33      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:har   css   伪类   title   after   osi   idt   技术分享   .com   

技术分享

横线用到了伪类进行实现。

css:

h4,h5 {
    text-align: center;
}
h5{
    color: gray;
}
.onimg_title:before{

    display: inline-block;

    position: relative;

    top:-7px;

    right: 20px;

    content: "";

    width: 100px;

    height: 0px;

    border: 1px solid black;

}
.onimg_title:after{

    display: inline-block;

    position: relative;

    top:-7px;

    left: 20px;

    content: "";

    width: 100px;

    height: 0px;

    border: 1px solid black;

}

  

html:

<div >
    <h4>  <span class="onimg_title">买实惠</span></h4>
    <h5>热门促销</h5>
</div>

  

文字两边的横线实现

标签:har   css   伪类   title   after   osi   idt   技术分享   .com   

原文地址:http://www.cnblogs.com/iriliguo/p/6561242.html

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