Як у текстовому рядку першу букву першого слова зробити великою, а усі інші символи - маленькими [CSS]

Привіт:) У цій замітці покажу як за допомогою CSS зробити першу букву великою.

Наприклад, є блок

<div>
    <a href="#">текст посилання 1</a><br>
    <a href="#">ТЕКСТ ПОСИЛАННЯ 2</a><br>
    <a href="#">тЕКСТ ПОСИЛАННЯ 3</a><br>
</div>

У користувацькій частину сайту це виглядатиме:

текст посилання 1
ТЕКСТ ПОСИЛАННЯ 2
тЕКСТ ПОСИЛАННЯ 3

Але нам потрібно, щоб тексти посилань виглядали так:

Текст посилання 1
Текст посилання 2
Текст посилання 3

Це можна зробити за допомогою декількох правил CSS:

/* ВАРІАНТ 1 */

a {
    display: inline-block; /* або block */ 
    text-transform: lowercase;
}

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

/* ВАРІАНТ 2 */

a {
    display: inline-block; /* або block */ 
	text-transform: lowercase;
}

a::first-letter {
	text-transform: capitalize;
}