在文本css之后放置图标

Question

我需要在一个段落之后放置一个呈现图标的i元素，但是当我在“之后”使用伪元素时，我只获得纯HTML而不是图标。如何获取图标呈现而不是html文本？谢谢。

.myDiv p:after {

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

RESULT

Lorem ipsum dolor sit amet, consectetur adipiscing<i class="towerIcon"></i>

Answer 1

您必须输入图标的CSS值。在这个例子中，我使用Font Awesome。

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

这是小提琴：http://jsfiddle.net/uzu7u56h/1/

Answer 2

您无法在/：伪选择器之后呈现HTML。你可以做的就是风格：直接之后，例如：

.myDiv p:after {
    content: '';
    /* Other styling stuff here - optionally can put text into content property above too */
}