UP | HOME

Sentence case in CSS

Sentence case is the transformation style that make only the first character capitalized. We don't have the built in style for this case in CSS. Instead, we can use ::first-letter pseudo element to handle it, like this:

.sentence-case {
  text-transform: lowercase;
  &::first-letter {
    text-transform: uppercase;
  }
}

Unfortunately, some mobile browsers do not support ::first-letter, in this case, the solution would be the combination of CS and HTML:

.sentence-case {
  text-transform: none;
}

<div class="sentence-case">Sentence case</div>

Date: 2019-02-27 Wed 00:00

Author: Huy Tran

Created: 2019-04-22 Mon 14:40