它应该显示一个星形,该星形可以在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以及relativeabsolute定位的正确组合,您可以在中间带有星号的线条如下所示:

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/

10-12 12:25
查看更多