CSS Append style

by Alon Rotem

HTML

<!-- This CSS appends "For developers" and "For designers" to links of a specific class -->
<p>
    <a href="/some_page1" class="fordeveopers">Creating pages</a> - automated by the class "fordevelopers"
</p>
<p>
    <a href="/dev/some_page1">Creating pages</a> - automated by the partial href containing /dev/...
</p>
<p>
    <a href="/some_page2" class="fordesigners">Designing pages</a> - automated by the class "fordesigners"
</p>

CSS

a[href*="/dev/"]::after,
a.fordeveopers::after  
{ 
    content: "For developers";
    background-color: #D4D4D4;
    padding: 1px 8px;
    margin: 0px 0px 0px 6px;
    cursor: default;
    color: #A66631;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    font-size: small;
}

a.fordesigners::after  { 
    content: "For designers";
    background-color: #A66631;
    padding: 1px 8px;
    margin: 0px 0px 0px 6px;
    cursor: default;
    color: #D4D4D4;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    font-size: small;
}

a:link { 
    text-decoration: none !important
}
a { 
    font-size: medium; 
}

body
{
    font-family: arial;
    font-size: small;
}