使用css内容属性呈现内容

Question

如果我在html中呈现右箭头，例如&#x25ba，为什么我无法使用css类使用以下内容渲染它？

.arrow-right  {    
    content: '&#x25ba';
}

<i class="arrow-right"></i>

Answer 1

您可以，但必须指定“之前”或“之后”，并使用斜杠表示法使其正常工作：

    .arrow-right:after  {    
        content: '\2192';
    }

<i class="arrow-right"></i>

Answer 2

content属性仅用于::before和::after伪元素。它不能与元素一起使用。

您可以更改样式：

.arrow-right::before {    
    content: '&#x25ba';
}

More in MDN

Answer 3

您必须在课程定义中使用after或before pseudo selectors

.arrow-right:after {    
    //content: "\2192";
     content: "→";
}

<i class="arrow-right"></i>

Answer 4

除了其他人撰写的关于使用:before或:after假选择者的内容之外，content不能包含HTML，并且通过扩展，它不能包含实体：您需要编写< / p>

.arrow-right:before {
    content: '►';
}