Как ими пользоваться?
Эти псевдо-элементы работают наподобие смежных :before и :after, и нам кажется, что здесь все довольно доступно и понятно. :first-letter определяет первую букву выделенного элемента, этот псевдо-элемент часто используется для создания типографского эффекта буквица. Давайте рассмотрим, как это реализовано.
p:first-letter {
font-size: 50px;
}
Этот код даст нам следующий результат.
Тем не менее, здесь нужно отметить тот факт, что этот эффект будет применяться только тогда, когда первому символу не предшествуют другие элементы (например, изображение). Вдобавок, когда у нас в линии есть такие же целевые элементы, все он будут подвергнуты эффекту.
Далее, что касается :first-line, то этот псевдо-элемент определяет первую линию целевого элемента. Нижеприведенный пример показывает, как мы можем выделить верхнюю строку абзаца полужирным текстом.
p:first-line {
font-weight: bold;
}
Как и в предыдущим коде :first-letter, этот также повлияет на все первые строки в абзацах на странице.
Так что, в реальных случаях, когда нам нужно добавить буквицу или изменить только первую строку первого абзаца, нам нужно все указывать более детально, либо добавляя дополнительный атрибут класс, либо применяя эти псевдо-селекторы вместе с селекторами :first-child или :first-of-type или что-то вроде того.
p:first-child:first-letter {
font-size: 50px;
}
p:first-child:first-line {
font-weight: bold;
}
Итак, у нас получилось выделить только первый абзац.
Псевдо-элементы в работе
Ну что же, давайте попробуем придать абзацу более привлекательный вид, используя псевдо-элементы. Но перед тем как начать, нам потребуется специальный шрифт для нашей буквицы, и здесь мы остановились на Hominis от Paul Lloyd. Затем мы определяем новое семейство шрифтов в каскадных таблицах стилей следующим образом:
@font-face {
font-family: 'HominisNormal';
src: url('fonts/HOMINIS-webfont.eot');
src: url('fonts/HOMINIS-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HOMINIS-webfont.woff') format('woff'),
url('fonts/HOMINIS-webfont.ttf') format('truetype'),
url('fonts/HOMINIS-webfont.svg#HominisNormal') format('svg');
font-weight: normal;
font-style: normal;
}
Далее мы выставляем стандартное семейство шрифтов для нашего абзаца:
p {
color: #555;
font-family: 'Georgia', Times, serif;
line-height: 24px;
}
В этом примере мы будем использовать селектор :first-child для указания первого абзаца, и применим декоративные стили, чтобы он выглядел более привлекательно:
p:first-child {
padding: 30px;
border-left: 5px solid #7f7664;
background-color: #f5f4f2;
line-height: 32px;
box-shadow: 5px 5px 0px 0px rgba(127, 118, 100, 0.2);
position: relative;
}
Затем мы добавляем буквицу при помощи :first-letter, увеличиваем размер шрифта, а также применяем новое семейство шрифтов:
p:first-child:first-letter {
font-size: 72px;
float: left;
padding: 10px;
height: 64px;
font-family: 'HominisNormal';
background-color: #7F7664;
margin-right: 10px;
color: white;
border-radius: 5px;
line-height: 70px;
}
Мы также сделаем акцент на первой строке при помощи :first-line следующим образом:
p:first-child:first-line {
font-weight: bold;
font-size: 24px;
color: #7f7664;
}
Наконец, нам нужно добавить декоративный атрибут в виде скрепки к первому абзацу при помощи псевдо-элемента :after.
p:first-child:after {
background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;
content: " ";
display: inline-block;
height: 100px;
position: absolute;
right: -5px;
top: -35px;
width: 100px;
}
Это и есть весь необходимый нам код. Теперь наш абзац выглядит гораздо лучше!
Вы также можете посмотреть демо, приведенное по ссылке ниже:
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
В завершение
Как мы уже ранее отмечали в этой статьи, эти псевдо-элементы, особенно :first-letter и :first-line, были добавлены в спецификацию еще со времен CSS1, а значит они отлично поддерживаются в Internet Explorer 8 и более ранних версиях.
Но, насколько нам известно, их не так часто используют. Так что надеемся, что данное руководство вдохновит вас на создание собственных эффектов.