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

Question

我需要更改每个单词首字母的大小、颜色和粗细。我不是在谈论将每个首字母大写。我的意思是针对第一个字母并根据我的选择应用样式。 : Click Here to see example about which i am talking.

Answer 1

你应该用标签包裹每个单词并使用 ::first-letter CSS 选择器。

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

示例：

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>

target first letter of each word in css