2

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>
1

2 Answers 2

9

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/

1
  • 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, 2022 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 */
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.