css only tags

by secretgspot

HTML

<h1>Pure CSS Post Tags</h1>
    

    <div class="post">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id pellentesque felis. Fusce lectus felis, blandit et porta at, viverra eget enim. In eu elit velit, nec volutpat nunc. Fusce vestibulum accumsan tortor. Cras lobortis ornare augue, vitae congue libero pharetra non. Curabitur molestie eros ac eros tincidunt ut dictum nisl semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fermentum, justo in ullamcorper elementum, mi mauris ultricies odio, quis rutrum urna nisi at purus. Aenean tempor odio at orci scelerisque id cursus sem cursus. </p>
        <ul class="tags">
            <li><a href="#">tag</a></li>
            <li><a href="#">tag name</a></li>
        </ul>
    </div>

CSS

body {
    margin:0;
    padding:20px 40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
h1{
    font-size:180%;
    font-weight:normal;
    }
h2{
    font-size:160%;
    font-weight:normal;
    }    
h3{
    font-size:140%;
    font-weight:normal;
    }    
pre{
    display:block;
    font:12px "Courier New", Courier, monospace;
    padding:10px;
    border:1px solid #bae2f0;
    background:#e3f4f9;    
    margin:.5em 0;
    width:500px;
    }        
.clear{
    clear:both;
    }    
img{border:none;}
    
/* Pure CSS Post Tags */    

.post{
    position:relative;
    padding:10px 20px;
    background:#f8f8f8;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    width:450px;
    border:1px solid #e8e8e8;
    margin-bottom:20px;
    }
.tags{
    margin:0;
    padding:0;
    position:absolute;
    right:24px;
    bottom:-12px;
    list-style:none;
    }    
.tags li, .tags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;
    }    
.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;    
    }    
.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;        
    }    
.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...