Prefixing HTML to element via CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Prefixing HTML to element via CSS

Post 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).
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Should be possible. Have a look here.. http://www.w3schools.com/css/css_pseudo_elements.asp
Post Reply