Add HTML tag inside CSS Content property

Question

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?

An italic element with no content and a class of icon? Yuck. — Quentin, Mar 19 '14 at 16:02

score 9 · Accepted Answer · answered Mar 19 '14 at 16:00

9

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.

answered Mar 19 '14 at 16:00

Quentin

914,110
126
1,211
1,335

The only way I can image is with Javascript (/jQuery). Pure CSS, impossible! – GreyRoofPigeon Mar 19 '14 at 16:01
@MuhammadReda — Use the code you are already using for your `i` element. – Quentin Mar 19 '14 at 16:07

score 2 · Answer 2 · answered Oct 30 '18 at 17:46

This is probably what you want,

To put an image to the left of your breadcrumb li links:

.breadcrumbs li a::before {
    content: "";
    display: block;
    background: url('/img/breadcrumb-icon.png') no-repeat;
    width: 20px;
    height: 20px;
    float: left; /*icon on the left*/
    margin: 0 6px 0 0; /*margin on the right so there is a gap between your icon and link*/
}

If you want it on the other side try float:right;margin: 0 0 0 6px; or use ::after should get you part of the way

Add HTML tag inside CSS Content property

2 Answers2

Linked