如何在HTML / CSS中显示不同颜色的单词的重音？

发布时间：2020-12-14 23:47:31 所属栏目：资源来源：网络整理

导读：我有一些这样的文字,以 HTML格式显示： pīng?pāng?qiú?pāi 如何更改文本颜色,使得文本为蓝色,而上面的重音为红色？解决方法 CSS将字母视为一个整体,因此它只能是1种颜色. 这是一个hacky版本：这仅在内容保持不变时才有效. span{ font-size:48px; color

我有一些这样的文字,以 HTML格式显示：

pīng?pāng?qiú?pāi

如何更改文本颜色,使得文本为蓝色,而上面的重音为红色？

解决方法

CSS将字母视为一个整体,因此它只能是1种颜色.

这是一个hacky版本：

这仅在内容保持不变时才有效.

span{
  font-size:48px;
  color:blue;
  position:relative;
}
span:after{
  content:'pīng?pāng?qiú?pāi';
  position:absolute;
  left:0;
  height:20px;
  overflow:hidden;
  z-index:9999;
  color:red;
}

<span>pīng?pāng?qiú?pāi</span>

就个人而言,我不会用这个.这是一种可怕的做法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!