CSS псевдоэлемент ::first-letter

Псевдоэлемент ::first-letter выбирает первую букву из всего текстового содержимого блочного элемента. Знаки препинания, которые предшествуют или следуют за первой буквой, тоже будут соответствовать выбору. Если текст начинается с числа, то будет выбрана только первая цифра.

/* Выбор первой буквы или цифры в элементе <li> */
li::first-letter { color: red; }

Псевдоэлемент ::first-letter не работает со строчными элементами (такими как <span>, <b>, <em> и так далее) и не применяет стиль, если первой букве предшествует другой контент (например, картинка).

С помощью псевдоэлемента ::before совместно с CSS свойством content можно добавить дополнительный текст, который будет предшествовать основному тексту внутри элемента. В этом случае псевдоэлемент ::first-letter будет соответствовать первой букве или цифре добавленного содержимого.

В блоке объявлений для псевдоэлемента ::first-letter возможно использование следующих CSS свойcтв:

• все свойства font;
• все свойства background;
• все свойства margin;
• все свойства padding;
• все свойства border;
• все свойства text;
• свойство color;
• свойство line-height;
• свойство letter-spacing;
• свойство word-spacing;
• свойство float;
• свойство box-shadow;
• свойство vertical-align (только если свойство float имеет значение none).

Пример

li {color: #ff9933;}
li::first-letter {
  color: #00802b; 
  font-size: 1.2em;
}

<ol>
  <li>Пункт родительского списка</li>
  <li>,П,ункт родительского списка
  <li>-П-ункт родительского списка
    <ul>
      <li>_Пункт дочернего списка</li>
      <li>"П"ункт дочернего списка</li>
      <li><img src="kvadrat.gif" alt="">
	  Пункт дочернего списка
      </li>
    </ul>
  </li>
  <li>'П'ункт родительского списка</li>
  <li>*П*ункт родительского списка</li>
  <li>#П#ункт родительского списка</li>
  <li>123Пункт родительского списка</li>
</ol>