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

first-letter

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Версии браузеров 1.0 1.0 9.0 7.0 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.2 1.0 7.5 12 5.1
Псевдоэлемент
::first-letter — этот псевдоэлемент позволяет задавать стили только к первой букве текста
Можно применять
свойства: background | border | color | float | font | letter-spacing | line-height | margin | padding | text-decoration | text-transform | text-shadow | vertical-align | word-spacing
Правила записи
element::first-line { свойство: значение; }
Примеры
p::first-line{ background-color: crimson; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { color: gold; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { font-size: 2em; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { letter-spacing: 7px; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { line-height: 3em; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { text-decoration: underline; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { text-shadow: 0.1em -0.1em 0.2em cyan; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { vertical-align: bottom; }

Для search-icon примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { border: 1px solid green; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { float: right; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { margin: 10px; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

p::first-line { padding: 15px; }

Для примера приведём просто набор букв дыфаодвалоп ыдвлаордлаорплаврплаплдрокушгнщку шнгукрдлаопрловалров алроалпралпрапраправр вадровадлродвалордва лорджвалорвларждвалрждвалор двалрождвалрждвалрж двалрждвлаожрдл вапржлваопрлваорп жлаоврплавжлрдповаровадорвадлровдал двалорждвалрдвлапждрвларпдлваоп

Поделиться