:first-letter

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

Пример

p {
    font-size: 1em;
}
p:first-letter{
    color: red;
    font-size:2em;
}
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
    <title>Псевдоэлемент ::first-letter</title>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, integer ut a a nulla lectus. Scelerisque id vitae ac orci. Pharetra porttitor ipsum vel quisque arcu, ligula sit ut at quisque, suspendisse wisi mollis nam massa. Diam consectetuer nec, a dui eu, dapibus pulvinar et vel morbi viverra morbi, odio eros erat ut accumsan, luctus elementum aptent nulla. Laoreet dolor ridiculus deserunt amet erat, id ultricies, dolor dolor parturient suspendisse pretium porro id, id magnis mi wisi in. Congue a nulla nunc ut nisl, curabitur odio commodo velit ad.</p>
    <p>Ac quo non libero. Maecenas diam elit, conubia suspendisse et vulputate mollis et cubilia, nec ligula nulla, fusce ultrices. Ligula quam auctor sem nec, est nulla. Integer pharetra viverra eget ipsum, wisi facilisis consequat ullamcorper, tenetur diam, viverra ac eget vestibulum mauris ac, quisque etiam. Id ultrices, lacus suspendisse nulla.</p>
</body>
</html>

Результат

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

Пример

p {
    font-size:1em;
}
p:first-letter {
    display:block;
    margin:0.2em 0.2em 0 0;
    float:left;
    color:red;
    font-size:2.5em;
}
<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
    <title>Псевдоэлемент ::first-letter</title>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, integer ut a a nulla lectus. Scelerisque id vitae ac orci. Pharetra porttitor ipsum vel quisque arcu, ligula sit ut at quisque, suspendisse wisi mollis nam massa. Diam consectetuer nec, a dui eu, dapibus pulvinar et vel morbi viverra morbi, odio eros erat ut accumsan, luctus elementum aptent nulla. Laoreet dolor ridiculus deserunt amet erat, id ultricies, dolor dolor parturient suspendisse pretium porro id, id magnis mi wisi in. Congue a nulla nunc ut nisl, curabitur odio commodo velit ad.</p>
    <p>Ac quo non libero. Maecenas diam elit, conubia suspendisse et vulputate mollis et cubilia, nec ligula nulla, fusce ultrices. Ligula quam auctor sem nec, est nulla. Integer pharetra viverra eget ipsum, wisi facilisis consequat ullamcorper, tenetur diam, viverra ac eget vestibulum mauris ac, quisque etiam. Id ultrices, lacus suspendisse nulla.</p>
</body>
</html>

Результат

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *