html - css分隔线问题

Question

我一直在尝试创建一个分隔线，类似于下图，仅使用 CSS。我在很多网站上都看到过这个，看起来很容易做到。实现这一目标的最佳方法是什么？

Answer 1

不确定这是否是最好的方法。

HTML:

<div class='seperator'>
   <div class='redSep'></div>
   <div class='graySep'> </div>
</div>

CSS:

.seperator{
   width:100%;
   height:20px;
}
.redSep{
   width:30px;
   left:0;
   float:left;
   height:4px;
   background-color: #ff3322;
   z-index:2;
   position:relative;
   margin-right:-30px;
   top:0px;
}
.graySep{
   width:100%;
   top:1px;
   float:left;
   position:relative;
   z-index:1;
   left:0;
   height:2px;
   background-color:#eee;
}

http://jsfiddle.net/jdRXG/1/

Answer 2

我想我已经理解了你的问题，试试这个：

<div id="lineWrap">
<span id="center"></span>
<span id="outer"></span>
</div><!--lineWrap-->

div#lineWrap {position:relative; height:3px;}
div#lineWrap span {position:absolute; left:0px; display:block;}
div#lineWrap span#center {top:1px; height:1px; background:#999; width:400px;}
div#lineWrap span#outer {top:0px; height:3px; background:#fd6e6e;width:40px;}

这里 >>> http://jsfiddle.net/RHf9L/

Answer 3

看到这个小提琴：http: //jsfiddle.net/QUvU7/

您可以使用 :after psuedoselector 来“伪造” dom 元素，而无需像这样实际添加它们：

.top:after{
    content: "";
    margin-top: 15px;
    display: block;
    border-bottom: 1px solid black;
}