2015-10-06 3 views
-4

Мне нужно поместить элемент i, который отображает значок после абзаца, но когда я использую псевдоэлемент «после», я получаю только чистый html, а не значок. Как я могу получить рендеринг значков вместо html-текста? Спасибо.Значок места после текста css

.myDiv p:after { 

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

РЕЗУЛЬТАТ

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

Немного прибегая к помощи сделал бы Yous OME здесь хорошо. [Можете ли вы использовать: после псевдоэлемента, чтобы добавить html?] (Http://stackoverflow.com/questions/1672879/can-you-use-the-after-pseudo-element-to-add-html) – CollinD

ответ

0

Вы не можете вынести HTML в: после того, как /: до псевдо селекторов. Однако, что вы можете сделать, это стиль: после непосредственно, например:

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

Вы должны поместить значение значка в 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/

Смежные вопросы