adrian holovaty

December 20, 2002, 4:53 AM ET

Dynamically labeling blockquotes with CSS

I'm experimenting with using CSS to automatically label blockquotes with their source URLs. Here's an example blockquote:

As ever in web design there has to be a bug and some hacking in response.

If your browser can handle it, you'll see a line appended at the bottom of the quote. That line uses the cite attribute of the blockquote tag to display the quote's source. (See the W3C specification for more on these tags.) It works for me in Mozilla 1.2 and Opera 7, both on Windows.

Here's a screenshot of what it looks like:

Here's the CSS code that makes this happen:

blockquote[cite]:after {
  content: "Quote from: " attr(cite);
  display: block;
}

In essence, that says, "Let's look at each blockquote in the document. If if contains a cite attribute, let's pop some text after it. Specifically, that text should be 'Quote from: ', followed by the actual contents of the cite attribute (which will be a Web address). And finally, make sure that inserted text appears on its own line."

I also added a bit of formatting. It's pretty self-explanatory:

border-top: 1px solid #669;
color: #669;
margin: 1em 0 0;
padding: .5em 0 0;
font-size: .8em;
font-weight: bold;

I'm not quite sure how useful this is, because the printed URL isn't a clickable hyperlink. (Does anybody know a way to make it so?) In Mozilla 1.2 for Windows, it can't even be selected by the mouse cursor for copying/pasting, so it's doubly unuseful. (It can, though, be selected in Opera 7.) Another potential problem: Long URLs might look funky and break the page layout somehow.

Still, it's always fun to find new ways to use style sheets.