CSS 中的阿拉伯语渲染不正确

Question

我有以下 HTML 和 CSS 代码如下

<span class="outer">
  <span class="inner">ب</span>َ
</span>

.inner {
  color: rgb(0, 152, 188);
}

内层应着色，而外层不应着色。

但是由于内部包含

ب

且外部包含

 َ

阿拉伯语中的 2 个字符合并形成单个字母，外部也被着色。我怎样才能避免这种情况？并且仅将

ب

着色并让

 َ

不着色。

我预计结果是这样的 。 但得到这个

Answer 1

就纯 CSS 而言，您可以将这 2 个符号分开（保存在 content css 属性中，以便使其相对于 html 更加友好）并使用相对于容器绝对定位的伪元素：

.arabic{
  font-weight: 600;
  font-size: 2rem;
}

.arabic::before {
  position: absolute;
  content: 'ب'; /* arabic letter */
  color: rgb(0, 152, 188); 
}

.arabic::after {
  position: absolute;
  content: 'َ'; /* vowel mark */
}

<span class="arabic"></span>