Capitalize first letter of an inline element's text

Question

I read elsewhere that the following should capitalize the first letter of the text of an inline element (e.g. a <span>).

However, if you run the code snippet you'll see that it doesn't work. If I replace the <span> with a <div> it works, but is there a way to capitalize the first letter without changing the element type?

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

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

`::first-letter` *"The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a **block-level** element"* [Source](http://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter) . The answer you referenced has a comment --> *"Keep in mind that `.qcont` has to be a block."* — Ramiz Wachtler, Mar 07 '19 at 14:13

DjaouadNM · Accepted Answer · 2019-03-07T14:22:01.760

5

The pseudo element ::first-letter only works if the parent element is a block element, so the span must be 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>

edited Mar 07 '19 at 14:22

answered Mar 07 '19 at 14:16

DjaouadNM

22,013
4
33
55

1

While this is the correct answer, please use the new format `::first-letter` with two `::` – Mattia Astorino Mar 07 '19 at 14:20

score 2 · Answer 2 · answered Mar 07 '19 at 14:19

Span has not default display, so you have to set it to block or something else
And it's not correct to set display property of first-letter, you should do it for entire class

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

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

score -1 · Answer 3 · answered Mar 07 '19 at 14:13

-1

You need to make the span itself display: inline-block - not the ::first-letter pseudo element.

.list .capitalize {
  display: inline-block;
}

answered Mar 07 '19 at 14:13

04FS

5,660
2
10
21

Capitalize first letter of an inline element's text

3 Answers3