使用CSS内容属性渲染内容

Question

如果我要像&#x25ba这样在html中渲染右箭头，为什么我不能使用css类使用以下代码来渲染它？

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

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

Answer 1

您可以，但是必须指定“ before”或“ after”并使用斜杠符号使其起作用：

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

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

Answer 2

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

您可以更改样式：

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

MDN中的更多内容

Answer 3

您必须在类定义中的pseudo selectors after或before使用

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

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

Answer 4

除了其他人写的关于使用:before或:after伪选择器的content ， content不能包含HTML，并且通过扩展它不能包含实体：您需要编写

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