CSS – Псевдо елементи

Автор: LinuxBG

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

Псевдо елементът first-letter променя стила на първата бука от тага в който е поставен

пример:

<style type='text/css'>
p:first-letter {
font-size:xx-large;
color: #0088cc;
font-weight: bold;
}
</style>

<p>Първата буква от тага "P" е синя и доста по-голяма от останалият текст :)</p>

Псевдо елемент first-line

Използва се за промяна на стила на първият ред от тага в който е поставен

пример:

<style type='text/css'>
p:first-line {
font-weight: bold;
color: #0088cc;
font-variant: small-caps;
}
</style>

<p>Първият ред е готин :)<br />, а вторият е обикновен :(</p>

А също така можете да съчетавате псевдо елементите 🙂

пример:

<style type='text/css'>
p:first-letter {
color: #88cc00;
font-size:xx-large
}
p:first-line {
color: #0088cc;
font-variant: small-caps
}
</style>

<p>Така първата буква е зелена, а останалата част от реда е син :)<br />А вторият ред е обикновен :(</p>

Псевдо елемент :before (Не работи под IE)

пример:

<style type='text/css'>
h1:before {
content: url('x.png');
}
</style>

<h1>Сега пред този таг ще има X :)</h1>

Псевдо елемент :after (Не работи под IE)

пример:

<style type='text/css'>
h1:after {
content: url('x.png');;
}
</style>

<h1>Сега след този таг ще има X :)</h1>