Псевдо-елементи css

Псевдоелементи дозволяють задати стиль елементів не визначених у дереві елементів документа, а також генерувати вміст, якого немає у вихідному коді тексту. 

Псевдоелементи починаються з ::, щоб відрізнити їх від псевдокласів. 

Наприклад, його можна використовувати для: 

• Стилізації першої літери або рядки елемента 
• Вставки вмісту до або після вмісту елемента

Синтаксис псевдо-елементу:

selector::pseudo-element {
  property:value;
}

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

Псевдо-елемент ::first-line використовується для додавання спеціального стилю до першого рядка тексту. У наступному прикладі форматується перший рядок тексту в усіх елементах <p>:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

See the Pen ::first-line-css by kravets (@raisa69) on CodePen.

Властивості, які можна застосовувати до псевдо-елементу :: first-line:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

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

 Псевдо-елемент :: first-letter псевдо-елемент використовується для додавання спеціального стилю до першої букві тексту. У наступному прикладі форматується перша буква тексту в усіх елементах <p>:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

See the Pen ::first-letter-css by kravets (@raisa69) on CodePen.

Властивості, що  застосовуються до псевдо-елементу :: first-letter:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (только если "float" установлен "none")
• text-transform
• line-height
• float
• clear

See the Pen ::first-letter-css by kravets (@raisa69) on CodePen.

Псевдо-елементи і CSS класи

 Псевдоелементи можна комбінувати з класами CSS:

p.intro::first-letter {
  color: #ff0000;
  font-size:200%;
}

See the Pen ::first-letter-class-css by kravets (@raisa69) on CodePen.

Псевдо-елемент - :: before 

Псевдо-елемент :: before може використовуватися для вставки деякого вмісту перед вмістом елемента. Для вставки на сторінку спецсимволів можна скорисатися їх CSS-кодами представлених у таблиці 

У наступному прикладі вставляється зображення перед вмістом кожного елемента <h1>:

h1::before {
  content: url(smiley.gif);
}

See the Pen ::before-css by kravets (@raisa69) on CodePen.

CSS псевдо-елемент - :: after 

Псевдо-елемент :: after може використовуватися для вставки деякого вмісту після вмісту елемента. У наступному прикладі вставляється зображення після вмісту кожного елемента <h1>:

See the Pen ::after-css by kravets (@raisa69) on CodePen.

Псевдоелемент ::selection

Псевдоелемент ::selection дозволяє застосувати стилі до частини документа, виділеного користувачем (наприклад, за допомогою миші).

CSS-властивості які можна  застосовувати з псевдоелементом ::selection :

• color 
• background-color
• cursor
• caret-color
• outline
• text-decoration
• text-emphasis-color
• text-shadow

Приклад застосування псевдоелементу ::selection

See the Pen ::selection by kravets (@raisa69) on CodePen.

Рекомендоване відео для перегляду:

Завдання 1

1. Встановити червоний колір тексту для першого рядка елемента <p>.

See the Pen psevdoelement-css-task1 by kravets (@raisa69) on CodePen.

Завдання 2

Для першої літери елемента <p> встановіть колір тексту на «червоний», а розмір тексту на «xx-large».

See the Pen psevdoelement-css-task2 by kravets (@raisa69) on CodePen.

Завдання 3

Вставити спецсимвол з таблиці символів до і після елементів <p>, використовуючи псевдоелементи :: before і :: after.

See the Pen psevdoelement-css-task3 by kravets (@raisa69) on CodePen.

Завдання 4

1. Стандартні посилання мають колір чорний.
2. При наведенні на посилання колір тексту посилання має відповідати назві (red, green або blue).
3. При виділенні тексту посилання - колір заднього фону повинен відповідати його назві.
4. Колір першої літери кожного абзацу повинен відповідати певному кольору.
5. Якщо виділено текст абзацу, колір заднього фону повинен відповідати кольору першої літери.
6. Поки на абзаці утримується кнопка миші, колір тексту повинен відповідати тематиці абзацу (red, green або blue).
7. Поки на абзаці утримується кнопка миші, колір першої літери повинен бути чорний.
8. Оптимізувати (скоротити) css код, утворюючи групові селектори, що відповідають за той самий колір при тому чи іншому стані елемента, де це можливо

See the Pen psevdoclass-psevdoelement-task by kravets (@raisa69) on CodePen.