html - 制作每个单词颜色CSS的第一个字母

Question

我在 anchor 标记中有一个 Logo 文本，并且文本 Logo 的第一个字母为红色。

<a href="http://frobbeintl.com" title="">FLETCHER ROBBE INTERNATIONAL LLP</a>

如下图:

我使用过 span，但它似乎在我的场景中不起作用。有人可以指出一些 CSS 方法吗？谢谢

Answer 1

Working JSFIDDLE

这是您可以为纯 HTML + CSS 中的内联元素做的最好的事情:

<a class = "name" href="http://frobbeintl.com" title="">
  <span>F</span>letcher
  <span>R</span>obbe
  <span>I</span>nternational
  <span>LLP</span<
</a>

CSS:

.name {
  text-transform: uppercase;
  }

.name span {
  color: red;
  }

您可以使用 ::first-letter 选择器，如 CSS-Tricks . <- 仅适用于 block 元素