HTML Code:
/*
These CSS Selectors will match links that are files.
The first example will match a link that ends ($) in .pdf and the places (PDF) after.
*/
/* Examples */
a[href$='.pdf']:after { content: " (PDF)"; }
a[href$='.doc']:after { content: " (MS Word)"; }
a[href$='.xls']:after { content: " (Excel)"; }
/* General Formatting */
a[href]:after {
padding: 3px;
display: inline;
vertical-align: middle;
background: transparent;
}
This will only work in browsers that support CSS2(.1). These browsers include Konqueror (KDE 3.5.2), Opera 9, and Firefox 1.5+ and the latest version of Safari. It isn't required for things to work but it is helpful and neat for browsers that support it so you can include it without fear of breaking other browsers.
HTML Code:
/*
Displays the quoted source inside the blockquote (only when it contains a cite attribute) automatically.
Can be customized. Uses attr(cite) to grab the cite attribute.
*/
blockquote[cite]:after {
margin: 1em 0 0 0;
font-size: 0.8em;
display: block;
padding: 0.5em 0 0 0;
font-weight: bold;
border-top: 1px solid #000;
color: #000;
content: "Quote from: " attr(cite);
}
Again, CSS2 is needed here. This won't break browsers that don't have CSS2 but for browsers that do, this is helpful. Instead of hardcoding the cite or using Javascript, you could implement a CSS solution. Opera, Konqueror, Firefox and the latest version of Safari.
HTML Code:
h2[id]:hover::after {
content: " #"attr(id);
}
This is useful when you provide anchors to sections of your page but want to show others what the anchor is called. You can style the generated content any way you like to make it obvious. This works with browsers that support CSS2 and content generation.
HTML Code:
/*
This will append the link IRI after the link itself and place it inside round brackets (parenthesis).
Will match any links that do not begind (^) with the pound sign (#) as those are for anchors
*/
@media print {
a:not([href^='#']):after { background: transparent; padding:3px; content:" ( " attr(href) " ) "; }
}
This is for print media (when you're printing a page, usually). It is good for factual articles that have a lot of quotes to other sites. This CSS will add the link URL (when the HREF attribute is not equal to # meaning it's an anchor) after the link and put brackets around it. Again, good for browsers that support it (Currently only FF 1.5+, I believe) and doesn't hurt browsers that don't support it.
HTML Code:
/*
This will automatically number your headings. Great for books or manuals.
*/
h2 { content: counter(section); counter-increment: section; }
h2:before { content: "Chapter "counter(section)": "; }
This requires the use of the :before pseudo-selector, counters and content property. Firefox 1.5+ and Opera 9+, etc should handle this fine.
You can see an example of this here:
http://nickpresta.ath.cx/old/h1_before_content.html
Linear Mode
