制作每个单词的第一个字母颜色css

Question

我在锚标记中使用徽标文字，并在文字徽标中将第一个字母设为红色。

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

如下图所示：

我已经使用过span但它在我的场景中似乎没有用。有人能指出一些CSS方法吗？感谢

Answer 1

虽然您可以使用此属性

a::first-letter {
   color: red;
}

但请注意，这将适用于超链接中的第一个单词，而不是单词。

以下是此http://css-tricks.com/almanac/selectors/f/first-letter/

的文档

Answer 2

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。＆lt; - 仅限于块元素

Answer 3

您可以将代码更改为以下内容：

<a href="http://frobbeintl.com" title=""><span>F</span>LETCHER <span>R</span>OBBE <span>I</span>NTERNATIONAL <span>LLP</span></a>

有了这个，你可以不同的方式设置跨度。从标记的角度来看，这很好，因为跨度没有意义。 使用这种技术和ids / nth-child，您甚至可以将每个字母的样式设置得不同。 如你所见，这很快变得丑陋 - 所以有人为你创建了一个小jQuery插件：http://letteringjs.com/

希望有所帮助。