This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts.

Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles.

Take a look at the demo

For CSS triangles you need to manipulate borders of an element that has zero height and width.

CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. The border radius will then merge into a circle.

HTML

I usually markup tags with unordered list. So the markup is fairly simple:

<ul class="tags">
	<li><a href="#">tag</a></li>
	<li><a href="#">tag name</a></li>

</ul>

I will add :before and :after pseudo elements and style them to achieve the styling I wanted

CSS

I am placing the tags list at the bottom of the post element with adjusting ULs absolute position

.tags{
	margin:0;
	padding:0;
	position:absolute;
	right:24px;
	bottom:-12px;
	list-style:none;
	}

Height (and line-height) of the list item LI and anchor A is set.

.tags li, .tags a{
	float:left;
	height:24px;
	line-height:24px;
	position:relative;
	font-size:11px;
	}

Next to style is the anchor element. We’re adding margins and paddings and some rounded corners on the right hand side.

.tags a{
	margin-left:20px;
	padding:0 10px 0 12px;
	background:#0089e0;
	color:#fff;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;	
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;	
	border-top-right-radius:4px;	
	} 

To achieve the pointed edge we are adding a :before pseudo-element. The element has the width and height set to zero, that way we are only using it’s borders. To "draw" an arrow pointing left we are showing only the right border.

.tags a:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-12px;
	width:0;
	height:0;
	border-color:transparent #0089e0 transparent transparent;
	border-style:solid;
	border-width:12px 12px 12px 0;		
	}

The last element to add is the :after pseudo-element. This will act as that rounded hole. What we’re doing here is creating an empty square, and we’re rounding it’s edges so we create a circle (and of course we position it with position: absolute).

.tags a:after{
	content:"";
	position:absolute;
	top:10px;
	left:0;
	float:left;
	width:4px;
	height:4px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px #004977;
	-webkit-box-shadow:-1px -1px 2px #004977;
	box-shadow:-1px -1px 2px #004977;
	}

We’re also adding a :hover state for the anchor:

.tags a:hover{background:#555;}	

.tags a:hover:before{border-color:transparent #555 transparent transparent;}

That is it! Enjoy! 🙂

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (17 Comments)

1. Baylor Rae
   January 5, 2011

   This is super cool, I love working with :before and :after pseudo-elements to create awesome effects like this without extra markup. Thanks for sharing

2. Balaji
   January 5, 2011

   Amazing work!:) Thanks for sharing...

3. Defite
   January 5, 2011

   Nice. Do you propose this on working pages or it is just like demo of what css can?)

4. cssglobe
   January 5, 2011

   Defite, you can easily use this as it will degrade nicely. Rounded corners will not work in some browsers so the rectangles will appear, and of course if browsers doesn't support :after and :before pseudo-elements, we will not have pointed arrow and that little circle at all.

5. Carl
   January 6, 2011

   I really wish we could teach more CSS3 tricks like this at our web design school here in Bangkok, however not too many people get to the advanced level of really exploring tricks like this.

6. Jeff
   January 6, 2011

   The triangle part seemed a little too sharp to me, so I made a small modification to the :before rules just to "round off" the point a bit... .tags a:before { height: 2px; border-width:11px 12px 11px 0; }

7. Deva
   January 7, 2011

   Great article! Thank you!

8. Kresimir Katusic
   January 8, 2011

   Nice tips, thx for idea

9. Marco
   January 9, 2011

   This does not work in Internet Explorer 5.5 on Windows 95. I have a brand new e-machines computer with a 17" monitor too.

10. Nicolas Gallagher
    January 9, 2011

    Basically the same thing I did to create the tag icon here - http://nicolasgallagher.com/pure-css-gui-icons/demo/ It's worth noting that: - pseudo-elements are part of the CSS2 spec (the only CSS3 being used here is to create the circle) - the "float" property is not needed in the example code. It has no effect given that you are absolutely positioning the pseudo-elements. - the browser support for this is Firefox 3.5+, IE 8+, Chrome 3+, Safari 3+, Opera 10+ (possibly earlier versions of the last 3 browsers),

11. cssglobe
    January 10, 2011

    Very funny Marco :)

12. cssglobe
    January 10, 2011

    Yes, Nicolas, I saw your project a while back, and I was impressed. Nice work!

13. Baconet
    January 12, 2011

    Excelente..!

14. Theo
    January 12, 2011

    Great and very creative, thanks!

15. Senior Web Design
    January 19, 2011

    Nice work. I like how it starts from such simple html markup, letting CSS do all the work.

16. acsc
    January 19, 2011

    Wah Excellent Tips

17. cssami
    January 20, 2011

    Nice CSS work. Thanks for sharing.

Sorry, the comment form is closed at this time.