Pseudoelement CSS ::first-letter

Pseudoelement CSS ::first-letter reprezentuje pierwszą literę tekstu wybranego elementu blokowego, jeśli przed nią nie znajduje się nic innego, np. grafika.

Choć do pierwszej litery tekstu elementu można łatwo się odwołać przez umieszczenie jej np. w elemencie span i nadanie mu identyfikatora albo przypisanie go do klasy, ale pseudoelement ::first-letter umożliwia zrobienie tego bez wprowadzania do dokumentu dodatkowych elementów bez wartości semantycznej.

Jeśli przed lub za pierwszą literą znajduje się znak interpunkcyjny, np. cudzysłów, to jest on uwzględniany jako jedność w połączeniu z następującą po nim literą, np.:

Cyfry są traktowane jak zwykłe litery, np.:

Obsługiwane własności przez ::first-letter

Pseudoelement ::first-letter obsługuje tylko niektóre własności CSS:

• Własności czcionki
• Własności marginesów
• Własności dopełnienia
• Własności obramowania
• Własności tła
• Własności text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (tylko, kiedy własność float jest ustawiona na none), color

Przykład użycia ::first-letter

Pseudoelementu ::first-letter można używać na przykład do tworzenia tzw. inicjału, czyli ozdobnie powiększonej pierwszej litery na początku rozdziału, np.:

p {line-height: 1.4}
p::first-letter {
  font-size: 3em;
  float: left;
  margin-top: 0.2em;
  margin-right: 3px
}
…
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Efekt:

Składnia ::first-letter

Składnia pseudoelementu ::first-letter:

::first-letter {...}