how to insert icons pseudo content

1.css:after {
2    content: "\86";
3    color: red;
4}
5.css.char:after {
6    content: "†";
7    color: blue;
8}
9.data:after {
10    content: attr( data-icon );
11}
12.js:after {
13    content: attr( data-icon );
14}
15.red:after {
16    color: red;
17}
18.blue:after {
19    color: blue;
20}

1<div class="css">hard coded css content</div>
2<div class="css char">hard coded css content char</div>
3<br>
4<div class="data red" data-icon="†">hard coded data-icon</div>
5<div class="data blue" data-icon="†">hard coded data-icon char</div>
6<br>
7<div class="js red">data-icon by js</div>
8<div class="js blue">data-icon by js char</div>

1var js = document.querySelectorAll( ".js" );
2js[ 0 ].setAttribute( "data-icon", "\u0086" );
3js[ 1 ].setAttribute( "data-icon", "†" );