:after pseudo-class and tags

views:

answers:

:after pseudo-class and tags

Hi,

I just created a simple page where I tried to emulate ajax with CSS. For doing that, I wanted to create invisible radio-buttons with visible labels, an external CSS-file should be loaded as soon as the user clicks on a label. There is just one problem: Tags are printed out as plain text inside the class. Is there a way to handle that?

-Felix

edit: As requested, my code:

<!doctype html>
<html><head>
    <title>Demo: Ajax without JS</title>
    <style type="text/css">
        #loader:checked:after{
            content:'<link class="sheet" rel="stylesheet" type="text/css" href="external.css"/>';
        }
    </style>
</head><body>
    <div class="rad"><input type="radio" id="loader"/><label for="loader">Loader</label></div>
</body></html>

Yes, it is as simple as possible.

+1 A:

Simply speaking, you cannot do this. Generated content is viewed as presentation, and is thus not actually inserted into the DOM.

Note that the generated content is only rendered—it doesn’t appear in the DOM tree. In other words, generated content doesn’t alter the document as such—only the presentation.

http://reference.sitepoint.com/css/content

Thus everything you try to insert will be rendered in plain text. Another implication of this is that whatever you generate with content you cannot manipulate with Javascript. So you're stuck with Javascript for this sort of things.

Yi Jiang 2010-09-26 12:13:52

Is there no way like adding the href-attribute to a given sub-element? (Besides: is that possible with a-tags?)

FB55 2010-09-26 12:37:18

@FB55 Not entirely sure what you're getting at here, but if you want to manipulate the DOM in any way, such as changing the attribute of an element, you **have** to use Javascript

Yi Jiang 2010-09-26 12:43:52

ansaurus

tags:

views:

answers:

:after pseudo-class and tags

related questions