How to insert icons pseudo content

.css:after {
    content: "\86";
    color: red;
}
.css.char:after {
    content: "†";
    color: blue;
}
.data:after {
    content: attr( data-icon );
}
.js:after {
    content: attr( data-icon );
}
.red:after {
    color: red;
}
.blue:after {
    color: blue;
}

Source: stackoverflow.com

How to insert icons pseudo content

<div class="css">hard coded css content</div>
<div class="css char">hard coded css content char</div>
<br>
<div class="data red" data-icon="†">hard coded data-icon</div>
<div class="data blue" data-icon="†">hard coded data-icon char</div>
<br>
<div class="js red">data-icon by js</div>
<div class="js blue">data-icon by js char</div>

Source: stackoverflow.com

Similar codes

0 vote338 views2 answers
Laravel default app.css downloD
CSS
3 votes381 views3 answers
Css border left
CSS
0 vote375 views2 answers
How to do addition or subtraction on CSS Variables?
CSS
0 vote363 views1 answer
Images end then start text in css
CSS
0 vote420 views1 answer
Responsive typography
CSS
0 vote374 views1 answer
Circle with 4 colors css
CSS
4 votes347 views2 answers
Cursive css
CSS
11 votes380 views4 answers
Background image css fill screen
CSS
44 votes365 views6 answers
Select odd child css
CSS
26 votes356 views4 answers
How to move text up and down in html
CSS