如何用CSS增大header h1首字母字体大小？解决代码无效问题

你的CSS选择器写法错误，导致样式不生效。问题出在::before:first-letter这个组合上——::before是用来在元素前插入生成内容的伪元素，你试图选中它的首字母，但这个伪元素本身没有内容，自然不会有效果。

要实现标题首字母放大200%的效果，直接使用::first-letter伪元素即可，它专门用来选中块级元素文本的第一个字母。

正确的CSS代码 #

.header h1::first-letter {
  font-size: 200%;
  /* 可选：添加float让首字母和文本对齐更自然，匹配示例效果 */
  float: left;
  margin-right: 8px;
}

示例HTML结构 #

<div class="header">
  <h1>DISPLAYNAME</h1>
</div>

补充说明 #

• ::first-letter只能作用于块级元素，h1本身就是块级元素，无需额外设置display属性。
• 如果需要兼容旧浏览器，也可以使用单冒号的:first-letter写法，它是CSS2的语法，CSS3用双冒号区分伪元素与伪类，但目前主流浏览器对两种写法都支持。

内容的提问来源于stack exchange，提问作者Mahi