如何在 HTML/CSS 中用不同颜色的单词显示重音? [英] How to display accents over words with different colors in HTML/CSS?

问题描述

我有一些这样的文本，以 HTML 格式显示:

I have some text like this, displayed in HTML:

pīng​pāng​qiú​pāi

如何更改文本颜色，使文本为蓝色而上面的重音为红色?

How can I change the text color, such that the text is blue while the accents above are red?

推荐答案

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

CSS treats the letter as a whole and therefore it can only be 1 colour.

这是一个hacky版本:

Here is a hacky version:

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

This will only work if the content will stay the same.

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

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

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

Personally, I wouldn't use this. It's a horrible way of doing it.

这篇关于如何在 HTML/CSS 中用不同颜色的单词显示重音?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！