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 vote193 views1 answer
Aligning form elements to center in css
CSS
1 vote181 views1 answer
Z-index on position absolute
CSS
0 vote201 views1 answer
Overflow-wrap: anywhere
CSS
0 vote198 views1 answer
Vue scoped scss media query
CSS
32 votes188 views6 answers
Background image size css
CSS
0 vote185 views1 answer
Font size clamp generator
CSS
2 votes190 views1 answer
Bootstrap class="mb-3"
CSS
1 vote298 views1 answer
Materialize button
CSS Materialize
19 votes171 views2 answers
Css center div vertically
CSS
2 votes192 views1 answer
Onclick javascript are you sure
CSS