Question

它应该显示一个星号，该星号在Firefox中有效，但在Chrome和Opera中均无效。即使我仅在内容中使用普通字母，也不会显示该字母，因此它与FontAwesome无关。

想法？

async commentService(parent, {id, comment}, ctx: Context, info) {
    const userId = getUserId(ctx);

    return ctx.db.mutation.updateService({
        where: {id},
        data: {
            comments: {
               create: {
                   message: comment,
                   author: {
                      connect: {id:userId}
                   }
               }
            }
        }
    })
}

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;
}

Answer 1

您实际上不需要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;

Answer 2

嗯，一种解决方案是在星星的类上添加一个i标签： <i class="fas fa-star"></i> 而且，我认为这是通用且可靠的。

Chrome和Opera上未显示CSS内容

2 个答案: