Three Lines

.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.