In article <om********************************@4ax.com>,
Stephen Poley <sb******************@xs4all.nl> wrote:
On 7 Mar 2006 11:55:40 -0800, "Mike" <mp*****@gmail.com> wrote:
I'm trying to modify actual html content via the style sheet. I know
there is the :before and :after tags, but I'm not quite sure how to use
it and if there's another way to do it.
I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly. But if IE ever
implements them I'm quite sure that in 99% of cases they will be used
inappropriately.
Personally I like the idea of the :before and :after pseudo-elements,
although I am not sure exactly how to best make use of them as yet.
However I am not precisely seeing how their use modifies HTML content
any more than any other use of CSS. Unless you are implying that CSS
should not create content (say text, as below) on a page? In which
case, would not the use of background images in CSS fall into the same
category?
Using pseudo-elements in the CSS for my header:
#header li:before { content: "| "; } /* Pipe symbol except on first */
#header li:first-child:before { content: ""; }
/* The current folder is floated right and marked >> in the header */
#folder { display: inline; float: right; }
#header #folder:before { content: ">> "; }
allowed me to use cleaner HTML:
<ol id="header">
<li><a href="../index.htm">home</a></li>
<li><a href="../airlie/index.htm">airlie</a></li>
<li><a href="../blog/index.htm">blog</a></li>
<li><a href="../computer/index.htm">computer</a></li>
<li><a href="../epoc/index.htm">epoc</a></li>
<li><a href="../sf/index.htm">gegenschein</a></li>
<li id="folder"><a href="../palmtop/index.htm">palmtop</a></li>
<li><a href="../web/index.htm">web</a></li>
</ol>
to get this result:
home | airlie | blog | computer | epoc | gegenschein | web >> palmtop
in this incomplete experimental page
http://www.ericlindsay.com/palmtop/palmnote.htm
--
http://www.ericlindsay.com