如何在 css/html 中只对 unicode(星号:\u2605)字符进行颜色填充?

Question

如何采用像 html/css 中的星号u2605a 星号这样的东西，只填充一半而不是完整。

这是代码：

<div class="starHalfFill">
u2605
</div>

到目前为止，我的样式如下所示：

.starHalfFill {
color: orange;
}

Answer 1

由于这是由颜色而不是背景颜色着色的，因此我们将不得不做更多的工作才能将其填充一半。通常，要半途而废，您会执行以下操作：

.starHalfFill {
background: linear-gradient(to right, orange 50%, grey 50%);
}

但由于这是一种基于文本的颜色，我们将不得不瞄准它。

.star.star--non-filled {
background: linear-gradient(to right, orange 50%, grey 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

这些属性将面向div 内的文本，并使填充颜色透明，从而使效果正常工作。