定位CSS中每个单词的第一个字母

Question

我需要更改每个单词的每个第一个字母的大小、颜色和粗细。我不是在谈论将每个第一个字母大写。我的意思是针对第一个字母并根据我的选择应用样式。

Answer 1

您应该用标签包装每个单词并使用::first-letterCSS 选择器。

另请注意，此选择器不适用于内联元素。如果您想将它与内联元素一起使用，例如<span>，请确保您设置display:inline-block（有关更多详细信息，请参阅此处：/sf/answers/534224771/）

例子 ：

p span { display: inline-block; font-family: 'Roboto', sans-serif }
p span::first-letter {
    color: red;
    font-weight: bold;
}

<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>