将行内元素文本的首字母大写

Question

我在别处读到以下内容应该大写内联元素（例如 a <span>）的文本的第一个字母。

但是，如果您运行代码片段，您会发现它不起作用。如果我<span>用 a替换<div>它就可以了，但是有没有办法在不更改元素类型的情况下将第一个字母大写？

.list .capitalize:first-letter {
  text-transform: capitalize;
  display: inline-block;
}

<div class="list">
  <span class="capitalize">capitalize me</span>
</div>

Answer 1

伪元素::first-letter仅在父元素是块元素时才有效，因此跨度必须是inline-block：

.list .capitalize {
  display: inline-block;
}
.list .capitalize::first-letter {
  /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
  text-transform: uppercase;
}

<div class="list">
  <span class="capitalize">capitalize me</span>
</div>