CODEWITHSUNDEEP
htmlcssborderline
Nesta
Nesta

Reputation: 1008

css separator line issue

I've been trying to create a separator line, similar to the image bellow, using CSS only. I've seen this in many websites and seems something quite easy to do. What's the best way to achieve this?

enter image description here

Upvotes: 0

Views: 159

Answers (3)

Warren
Warren

Reputation: 163

I think i have understood your question, give this a try:

<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;}

Here >>> http://jsfiddle.net/RHf9L/

Upvotes: 2

npage
npage

Reputation: 1288

Not sure if this would be the best way to do it.

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/

Upvotes: 2

Aaron K
Aaron K

Reputation: 437

See this fiddle: http://jsfiddle.net/QUvU7/

You can use the :after psuedoselector to "fake" dom elements without actually adding them like such:

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

Upvotes: 0

Related Questions