Custom CSS List or HR separators powered with Content and Counter property

Not sure from where I should start. These days simple and light weight CSS powered sites are more popular and makes your site to look beautiful with just few tweaks in CSS.

I just thought to create some Ordered list without OL or UL or Li Tags etc. If we break the OL structure we miss the counter and manually start it again to continue. Since HTML5 is in place we use Article tags to display multiple articles in one single page, what if we want to put a counter like Article 1 or Article 2 etc. Yes this can be made possible with CSS Content and Counter property.

Custom CSS List or hr separator styles powered with Content property and pseudo-elements
Custom CSS List or hr separator styles powered with Content property and pseudo-elements


Here in my example I have used HR tags as separators for each section I want to have in single page and used :before and :after pseudo element to create custom shapes and used content property with custom counter defined. The special in this is the first separator can be at the start of the page and in middle you can have some other counters and can continue the first section at the end of anywhere in HTML. Sounds so cool right?

demo download

Look at this simple CSS and HTML for reference:

CSS:

h2{margin:0px;text-shadow:0 1px 0 #FFF;}
p{padding:10px 5px 0;font-size:90%;}
hr{border:1px 0 0 0;border-style:solid;color:#FFF;counter-increment:relatedarticles;margin:30px 0 20px 0;text-align:center;display:block;}
.banner{ counter-reset: relatedarticles; }
.banner hr{border-color:#4BA800;}
.banner hr:before{content:"Article "counter(relatedarticles);width:100px;height:30px;display:block;background-color:#4BA800;position:absolute;left:50%;margin-top:-25px;line-height:35px;font-weight:bold;border-radius: 5px 5px 0 0;letter-spacing:0.05em;text-shadow: 0 1px 0 #000;margin-left:-50px;font-size:18px;}
.banner hr:after{content:"";border-style:solid;border-width:20px 50px 0 50px;border-color:#4BA800 #FFF #FFF #FFF;width:0;height:0;position:absolute;left:50%;margin-top:5px;margin-left:-50px;}

HTML:

<div class="containers banner" style="width:300px; display:inline-block">
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

This works well in almost all the latest browsers like Internet Explorer 9+, Firefox, Opera, Safari, Chrome etc. and works well in mobile browsers too. So goahead download, customize and feel free to use it in your projects 🙂 Will share such simple CSS examples here after.