时间戳

首页 > 解决方案 > CSS 内容未在 Chrome 和 Opera 上显示

html - CSS 内容未在 Chrome 和 Opera 上显示

问题描述

它应该显示一个星号，它适用于 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">

标签： htmlcssfont-awesome

解决方案

你实际上不需要 ahr有一条水平线。使用, 和和定位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;

推荐阅读