在单词中单个字母的空格内添加bg颜色

Question

我想为单个字母添加颜色,这个字母有空格.

例如,如果我们有一个单词名称'Does'我需要填写字母'o'和'e'的颜色,其中我需要字母空格内的颜色我希望bg颜色在一个字母的空格内这是我的要求.

我附上一张图片,检查字母'o,B,P',它们在空间内有bg颜色.

Answer 1

这是完全可能的,即使只使用css,但你必须为每个字母和字体创建一个自定义的解决方案,你必须在跨度中包装需要这个CSS的字母并给它们适当的类.

检查笔:

http://codepen.io/anon/pen/LVRLap

h1 {
  font-size: 100px;
  font-family: Verdana;
}
.fill-letter {
  position: relative;
}
.fill-letter:after {
  display: block;
  content: "";
  position: absolute;
}
.o:after {
  background-color: orange;
  height: 45%;
  left: 25%;
  top: 30%;
  width: 50%;
  z-index: -1;
}

<h1>H<span class="fill-letter o">O</span>ME</h1>