.three-lines{
height:3px;
background:#000;
overflow:visible;
text-algin:center;
position:relative;
margin:72px 0;
z-index:1;
width:100%;
text-align:center;
> *{
background:#fff;
display:inline;
padding:1% 9%;
position:relative;
width:auto;
top:-15px;
z-index:2;
margin:0 auto;
}
&:before, &:after{
content:"";
height:3px;
background:#000;
display:block;
width:90%;
margin:0 auto;
position: relative;
z-index:1;
top:-6px;
}
&:after{
width:95%;
top:-22px;
}
}
The design required 3 black lines of varying widths behind certain headings. My first thought was a PNG background, but I challenged myself to do it with no background images and as few lines of code as possible.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.