Question

我正在我的网站上实现此CodePen代码段，并注意到半星与其他星没有对齐。这只是一个很小的差异，但我注意到了，这让我很烦。我注意到的另一件事是，半星的橙色部分不是从星的开头开始的：橙色部分之前有一点灰色。您可能需要放大一点才能看到这些内容。

我尝试弄乱CSS中的top和left值以及line-height，但是这些都不起作用。我究竟做错了什么？有办法解决这个问题还是我被困住了？

.glyphicon-star {
  font-size: 40px;
  color: #e67e22;
}
.glyphicon-star.half {
  position: relative;
}
.glyphicon-star.half:before {
  position: relative;
  z-index: 9;
  width: 47%;
  display: block;
  overflow: hidden;
}
.glyphicon-star.half:after {
  content: '\e006';
  position: absolute;
  z-index: 8;
  color: #bdc3c7;
  top: 0;
  left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="rating">
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star half"></i>
</div>

Answer 1

您可以使用clip-path在右侧绘制一个银色的半星，而不必限制宽度并使用overflow: hidden。您无需垂直对齐半星，它还可以解决左侧的缺失点：

.glyphicon-star {
  font-size: 40px;
  color: #e67e22;
}

.glyphicon-star.half::after {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  color: #bdc3c7;
  content: '\e006';
  clip-path: inset(0 0 0 47%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="rating">
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star half"></i>
</div>

半颗星未与其余星对齐

1 个答案: