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
– Quentin, Commented Mar 19, 2014 at 16:02

Quentin · Accepted Answer · 2014-03-19 16:00:36Z

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, 2014 at 16:00

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GreyRoofPigeon Over a year ago

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

Quentin Over a year ago

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

ono2012 · Accepted Answer · 2018-10-30 17:46:08Z

1

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

answered Oct 30, 2018 at 17:46

ono2012

5,3072 gold badges35 silver badges43 bronze badges

Collectives™ on Stack Overflow

Add HTML tag inside CSS Content property

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related