Home/ Questions/Q 1090573
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T23:23:44+00:00

I just created a simple page where I tried to emulate ajax with CSS.

  • 0

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?

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    See also: https://developer.mozilla.org/en/CSS/content

    • 0