Pure CSS3 Post Tags

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.

HTML here:

Tags:

Some bigger tags:

CSS3:

body {
    font-family: sans-serif;
    font-size: 12px;
}

.bigger {
    font-size: 24px;
}

a[rel="tag"] {
    display: inline-block;
    position:relative;
    padding: .7em;
    padding-left: 2em;
    margin: 0 .5em .5em 0;
    background: #8dc63f;
    color: rgba(255,255,255,.6);
    text-decoration:none;
    font-weight: bold;
}

a[rel="tag"]:hover {
    background:#b30;
    color:white;
}

a[rel="tag"]:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:1;
    
    background: -moz-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -moz-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -moz-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -o-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -o-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -o-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -ms-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -ms-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -ms-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
    background: -webkit-radial-gradient(.6em .6em, circle, white .55em, rgba(255,255,255,0) .6em) -.6em -.6em,
                -webkit-radial-gradient(1em 50%, circle, white .35em, rgba(255,255,255,0) .4em),
                -webkit-radial-gradient(1em 47%, circle, rgba(0,0,0,.4) .4em, transparent .43em);
}

a[rel="tag"]:after {
    content: '';
    position:absolute;
    top:.25em;
    right:.25em;
    bottom:.25em;
    left:.25em;
    border: 1px rgba(0,0,0,.3) dashed;
    outline: 1px rgba(255,255,255,.5) dashed;
}​

Result here:

Ping your blog, website, or RSS feed for Free Sitetag