CSS 中未显示 FontAwesome 图标：在 Chrome 中的选择器之后？

Question

这是我的 HTML:

<hr class="star-light">

这是我的 CSS:

hr.star-light:after {
    color: #fff;
    background-color: #EF672F;
}

hr.star-light:after, hr.star-primary:after {
    content: "\f005";
    display: inline-block;
    position: relative;
    top: -.8em;
    padding: 0 .25em;
    font-family: FontAwesome;
    font-size: 2em;
}

它在 Firefox 中显示中间带有白色星号的小时，但在 Chrome 中它只是一个小时，没有显示星号。

知道我必须更改什么才能使其在 Chrome 中工作吗？

谢谢

Answer 1

希望对您有所帮助。

请尝试以下CSS。

hr.star-light:after, hr.star-primary:after {
content: "\f005";
display: inline-block;
position: relative;
top: 0em;  /* changed value from -.8em to 0em */
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}

是否有任何理由将负值分配给顶部属性？

请参阅 codepen 示例 - https://codepen.io/prakashrajotiya/pen/ZEzxKdJ?editors=1100

CSS 中未显示 FontAwesome 图标：在 Chrome 中的选择器之后？

FontAwesome icon not shown in CSS :after selector in Chrome?

css

pseudo-element

font-awesome