Page 1 of 1

Prefixing HTML to element via CSS

Posted: Thu Jul 06, 2006 8:17 am
by Maugrim_The_Reaper
I was curious whether its possible in CSS to add a small HTML snippet before all instances of a specific element.

As an explanation, to turn:

Code: Select all

<p>some text</p>

<pre>
    public function hello() {
        echo 'Hello';
    }
</pre>
into

Code: Select all

<p>some text</p>

<p><span style="font-weight: bold;">php:</span></p>

<pre>
    public function hello() {
        echo 'Hello';
    }
</pre>
using only CSS.

I played around with:

Code: Select all

#bodyContent p + pre.php:before {
    content: "<p><span style=\"font-weight: bold;\">php code:</span></p>";
}
But of course is probably not the way to go (if its even possible).
The problem of course is that it's added to the start of the <pre> element and so the HTML is not being parsed by the browser. Altering the original HTML is very difficult and so I was hoping there was some way around having to go editing source code...

Any way of applying a style to a preceeding element using CSS2 selectors? Opposite of p + pre (in the case above).

Posted: Wed Jul 12, 2006 12:42 am
by Benjamin
Should be possible. Have a look here.. http://www.w3schools.com/css/css_pseudo_elements.asp