【问题标题】：Place icon after text css [duplicate]在文本css之后放置图标[重复]
【发布时间】：2015-10-06 14:39:57
【问题描述】：

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

.myDiv p:after {

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

结果

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

【问题讨论】：

在谷歌上搜索一下就可以了。 Can you use the :after pseudo element to add html?

标签： html css

【解决方案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/

【讨论】：

我在 stackoverflow 中发现了几个误导性的来源，这些来源正在发布，通常不可能使用图标而不是常规字符与后选择器一起使用。这里的解决方案优雅而简单，并且完全符合它的要求。肯定为我工作:-)

【解决方案2】：

你不能在 :after/:before 伪选择器中渲染 HTML。但是，您可以直接使用 :after 样式，例如：

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

【讨论】：