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?

Schaffner

An italic element with no content and a class of icon? Yuck. – Judyjudye

Why not just add the icon inside the <a> tag? – Rampant

Answer 1

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.

Judyjudye

The only way I can image is with Javascript (/jQuery). Pure CSS, impossible! – Alpestrine

@MuhammadReda — Use the code you are already using for your i element. – Judyjudye

Answer 2

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

Tin