css - CSS :after selector in Chrome? 中未显示 FontAwesome 图标

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