Существует несколько способов для создания первой буквы заглавной в 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), чтобы создать стилизованную первую букву для каждого абзаца.
Выберите тот способ, который наиболее подходит для ваших целей и примените его.