Examples of CSS pseudo-element hacks (.net)

by necolas

HTML

<h1>Examples of CSS pseudo-element hacks</h1>

<ul>
    <li><a href="http://jsfiddle.net/necolas/hjMqh/" target="_blank">Creating CSS speech bubbles</a></li>
    <li><a href="http://jsfiddle.net/necolas/xCfeH/" target="_blank">Creating CSS ribbons</a></li>
    <li><a href="http://jsfiddle.net/necolas/uzaG9/" target="_blank">Creating CSS folded corners</a></li>
    <li><a href="http://jsfiddle.net/necolas/Zjtye/" target="_blank">Pseudo background-crop</a></li>
    <li><a href="http://jsfiddle.net/necolas/TeyVz/" target="_blank">HTML5 Boilerplate buttons</a></li>
    <li><a href="http://jsfiddle.net/necolas/ZEG6C/" target="_blank">Creating CSS tags</a></li>
</ul>
    
<p>By <a href="http://nicolasgallagher.com" target="_blank">Nicolas Gallagher</a></p>

CSS

body {
    width:400px;
    padding:30px;
    margin:0 auto;
    font:16px/1.4 Arial, san-serif;
}

a {
    color:#C55500;
}

a:hover,
a:focus,
a:active {
    text-decoration:none;
    color:#730800;
}

h1 {
    margin:0 0 1em;
    font-size:20px;
    font-weight:bold;
}

ul {
    list-style:square;
    padding:0;
    margin:1.4em 0;
}

li {
    padding:0;
    margin:0.5em 0;
}

p {
}