Add HTML tag inside CSS Content property

css css-content
Muhammad Reda picture Muhammad Reda · Mar 19, 2014 · Viewed 20.1k times · Source

I'm looking for a way to add an HTML tag for CSS content property inside :after and :before.

Unlike this question which only discusses adding symbols like <. What I'm trying to add is something like:

.breadcrumbs li a:before {
    content: '<i class="icon"></i>';
}

Is there any possible way to do that?

Answer

Quentin picture Quentin · Mar 19, 2014

This is impossible. You cannot generate markup from CSS.

It should also be unnecessary - stick your background image / icon font / whatever in the generated pseudo-element you have already.

Related questions

Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More
Adding HTML entities using CSS content

How do you use the CSS content property to add HTML entities? Using something like this just prints &nbsp; to the screen instead of the non-breaking space: .breadcrumbs a:before { content: '&nbsp;'; }

Read More
CSS content property: is it possible to insert HTML instead of Text?

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: '<a href="#top">Back</a>'; } this would …

Read More