它应该显示一个星形,该星形可以在Firefox中使用,但不能在Chrome中和Opera中使用。即使我仅在内容中使用普通字母,也不会显示该字母,因此它与FontAwesome无关。
有想法吗?
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;
}
<hr class="star-light">
最佳答案
您实际上不需要hr
即可具有水平线。使用div
以及relative
和absolute
定位的正确组合,您可以在中间带有星号的线条如下所示:
HTML:
<div class="star-light">
* CSS:*
.star-light,
.star-primary {
position: relative;
border: 1px solid;
}
.star-light:after,
.star-primary:after {
content: "\f005";
position: absolute;
top: -.5em;
left: calc(50% - .5em);
font-size: 2em;
font-family: FontAwesome;
}
在CodePen上检查结果:https://codepen.io/kis-nagy/pen/QVRbpy
如果您实际上并不想要实线,则可以从许多其他边框样式中进行选择。 https://www.w3schools.com/CSSref/playit.asp?filename=playcss_border-style&preval=groove
例如,对于凹槽样式,请写
border: 3px groove;
关于html - Chrome和Opera上未显示CSS内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52474789/