1

I need to place an i element that renders an icon, after a paragraph, but when I use the pseudo element "after" I only get pure html and not the icon. How can I get the icon rendering instead of the html text? Thank you.

.myDiv p:after {

    content: '<i class="towerIcon"></i>';
}

RESULT

Lorem ipsum dolor sit amet, consectetur adipiscing<i class="towerIcon"></i>
user1765661
  • 585
  • 1
  • 7
  • 21
  • 9
    A bit of googling would have done yous ome good here. [Can you use the :after pseudo element to add html?](http://stackoverflow.com/questions/1672879/can-you-use-the-after-pseudo-element-to-add-html) – CollinD Oct 06 '15 at 14:41

2 Answers2

8

You have to put the CSS value of the icon. In this example I use Font Awesome.

div p:after {
    content: '\f002';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    margin-left:5px;
    color:red;
}

Here is the fiddle : http://jsfiddle.net/uzu7u56h/1/

lddz
  • 282
  • 1
  • 6
  • I found several misleading sources here in stackoverflow which were posting, that it is in general not possible to use icons instead of regular characters with the after-selector. This solution here is elegant and easy and does exactly what it should. Worked for me, definately :-) – Tillito Feb 23 '22 at 16:33
1

You can't render HTML in :after/:before pseudo selectors. What you can however do is style :after directly, for example:

.myDiv p:after {
    content: '';
    /* Other styling stuff here - optionally can put text into content property above too */
}
Sam A. Horvath-Hunt
  • 931
  • 1
  • 7
  • 20