Be sure to 'cite' the authors of your quotes!
In general, it's a good practice to include the cite attribute when you use a <blockquote> element so the user will have some sort of reference of what URL or from whom the quote was taken from.
However, this attribute is never displayed on-screen. So most users simply disregard it (or, are unaware that it exists) when coding their pages. But not so now! This CSS code:
blockquote[cite]::after {
content:"Quote from: " attr(cite);
display:block;
}
When used with:
<blockquote cite="http://www.cssdreams.com">
Using CSS can really be powerful, and is most certainly the future
for web designers.
</blockquote>
Will output something like this:
Using CSS can really be powerful, and is most certainly the future for web designers.
Quote from: http://www.cssdreams.com
However the link following the “Quote from:” bit will not be hyperlinked as it is here, unless you add some DOM scripting to do that part.
Additionally, the guy who thought of this also included some code to make it look nice. Adding the bit of code below gives it
some padding/margin spacing, and add’s a single pixel divider between the quoted text and the cite URL. This is very nice!
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 #669; color:#666;
content:"Quote from: " attr(cite);
}
Notes:
Internet Explorer (even version 7) doesn't support the the ::before and ::after pseudo elements.
Dec 26, 2006
Comments
This article hasn't been commented yet.
Write a comment
* = required field