Pure CSS3 Post Tags

written on:5 Jan, 2011 by Alen Grakalic

Pure CSS3 Post Tags

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

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! :)

About the author

Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

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

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

Baylor Rae' 5 Jan, 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
Balaji 5 Jan, 2011

Amazing work!:)

Thanks for sharing...
Defite 5 Jan, 2011

Nice. Do you propose this on working pages or it is just like demo of what css can?)
cssglobe 5 Jan, 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.
Carl 6 Jan, 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.
Jeff 6 Jan, 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;
}
Deva 7 Jan, 2011

Great article! Thank you!
Kresimir Katusic 8 Jan, 2011

Nice tips, thx for idea
Marco 9 Jan, 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.
Nicolas Gallagher 9 Jan, 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),
cssglobe 10 Jan, 2011

Very funny Marco :)
cssglobe 10 Jan, 2011

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

Excelente..!
Theo 12 Jan, 2011

Great and very creative, thanks!
Senior Web Design 19 Jan, 2011

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

Wah Excellent Tips
cssami 20 Jan, 2011

Nice CSS work. Thanks for sharing.

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News