Pure CSS help link

Kleiner Spass mit "modernen" Klassen. http://jsfiddle.net/csswizardry/Fu38J/

HTML

<p>
    <a href=# class=?>Help and FAQ</a>
</p>

<p>
    <a href=# class=!>Warning</a>
</p>

<p>
    <a href=# class=#>Permalink</a>
</p>

CSS

/* Housekeeping */
html{
    font:1em/1.5 Georgia, serif;
}
a{
    color:#09f;
    text-decoration:none;
}
    a:hover{
    color:#00f;
        text-decoration:underline;
    }

/* Shared */
.\?:after,
.\!:after,
.\A:after{
    content:attr(class);
    text-align:center;
    display:inline-block;
    margin-left:4px;
    min-width:1.5em; /* Equal to line-height */
    text-shadow:0 -1px 0 rgba(0,0,0,0.25),0 1px 0 rgba(255,255,255,0.1);
    -webkit-border-radius:100%;
       -moz-border-radius:100%;
            border-radius:100%;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.25);
       -moz-box-shadow:0 0 5px rgba(0,0,0,0.25);
            box-shadow:0 0 5px rgba(0,0,0,0.25);
}

/* Help links */
.\?{}
    .\?:after{
        color:#fff;
        background-color:#48bd38;
    }

/* Warning links */
.\!{
    color:#c00;
}
    .\!:after{
        color:#7ff;
        background-color:#c00;
    }

/* Permalinks */
.\A{}
    .\A:after{
        color:#fff;
        background-color:#09f;
    }