Как сделать первую букву заглавной css

Существует несколько способов для создания первой буквы заглавной в CSS. Рассмотрим два из них.

С помощью псевдоэлемента ::first-letter:

p::first-letter {
  text-transform: uppercase;
}

Этот код применяет свойство text-transform с параметром uppercase к первой букве каждого абзаца (p) на странице. Таким образом, первые буквы станут заглавными.

С помощью ::before псевдоэлемента:

p::before {
  content: "";
  display: inline-block;
  width: 1ch;
  height: 1ch;
  margin-right: 5px;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

Этот код создает псевдоэлемент ::before для каждого абзаца (p) на странице. С помощью свойства content задаем пустую строку. Далее, мы использовали ширину (width), высоту (height), отступ справа (margin-right), цвет фона (background-color), цвет текста (color), размер шрифта (font-size), высоту строки (line-height), текстовое выравнивание (text-align) и трансформацию текста (text-transform: uppercase), чтобы создать стилизованную первую букву для каждого абзаца.

Выберите тот способ, который наиболее подходит для ваших целей и примените его.