水平线css语法,中间带词的水平线的CSS技术

红颜莎娜

好的，这个比较复杂，但是除了IE<8外，它什么都能工作。

div {

    text-align: center;

    position: relative;

}

span {

    display: inline-block;    

}

span:before,

span:after {

    border-top: 1px solid black;

    display: block;

    height: 1px;

    content: " ";

    width: 40%;

    position: absolute;

    left: 0;

    top: 1.2em;

}

span:after {

   right: 0;  

   left: auto; 

}前和：后元素是绝对定位的，所以我们可以拉一个向左和一个向右。此外，宽度(在本例中为40%)与文本的宽度密切相关。得想办法解决这个问题。至少top: 1.2em确保行或多或少地保持在文本的中心，即使您有不同的字体大小。不过，这似乎确实很有效：http://jsfiddle.net/tUGrf/3/