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

Question

我想为一个单词中添加空格的单词添加颜色。

例如，如果我们有一个单词名称＆＃39;是＆＃39;我需要填写字母的颜色＆＃39; o＆＃39;并且＆＃39; e＆＃39;我需要字母空间内的颜色，我希望bg颜色在我要求的字母空间内。

我附上了一张图片，检查字母“o”，“B”，“P＆＃39”，其中有空格内的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>