Псевдоелементи :before та :after

В CSS для кожного тега можна створити два додаткових віртуальних псевдоелементи. Ці елементи відсутні в HTML-коді і повністю відносяться до оформлення даних.

Псевдоелементи вбудовуються всередину елемента, до якого застосовано стилі:

:before - у початок елемента, перед всіма його дочірніми елементами;

:after - в кінець елемента, після всіх його дочірніх елементів.

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


				<p>Привіт</p>


				p { padding: 20px; background: #c3e3f3;}

				p:before { content: ">>>> ";}

				p:after { content: "!!!";}

Результат:

Привіт

Але не кожен тег може мати псевдоелементи. Деякі теги самі по собі не можуть мати контенту, дочірніх елементів, а отже, і псевдоелементів. Застосування стилів до таких тегів, як <img>, <br>, <hr>, <input> буде безрезультативним.

Псевдоелементи за замовчуванням є інлайновими елементами. Основний їх атрибут - content. Якщо не задати цей атрибут - псевдоелемент не з’явиться на веб-сторінці.

Атрибут content доволі складний, може містити в собі символ чи строку тексту, зображення, лічильник, що буде змінювати значення з кожним наступним використанням псевдоелемента і т.п. Інформацію про всі варіанти можна подивитися на htmlbook.ru/css/content чи webref.ru/css/content.

Але найчастіше в нас буде використовуватися порожній контент - content: "";, в псевдоелементи ми будемо вставляти фонові зображення.

Псевдоелементи, як і інші елементи, можуть змінити свою властивість display з inline на inline-block чи block. Ось приклад:


				<p>Привіт</p>


				p { padding: 20px; background: #c3e3f3;}

				p:before,
p:after { content: ""; display: block; height: 20px; background: green;}

Результат:

Привіт

Завдання. Вставте псевдоелементами після тексту "Контроль" напис дрібним шрифтом: (квиток зберігайте до кінця поїздки), а над текстом - картинку з ножицями.

УВАГА!!! Міняти треба тільки CSS, HTML-код не чіпайте, не добавляйте в нього картинку і текст!


				<div>

				  <h2>Квитанція:</h2>

				  <p class="info">Екскурсія для групи з <strong>20</strong> школярів.</p>

				  <p class="price">Ціна: <strong>100 грн.</strong></p>

				  <p class="control">Контроль</p>

				</div>


				div { padding: 4px 20px; width: 170px; border: 1px solid #999;}

				h2 { margin: 0; padding: 10px 0;}

				p { margin: 0; padding: 10px 0;}

				.info { font-size: 120%; line-height: 1.3em;}

				.price { padding-bottom: 30px; font-style: italic;}

За допомогою псевдоелемента :after можна легко очищувати прив’язки після елементів з властивостями float. В даному випадку просто додаємо клас з цим псевдоблоком батьківському елементу. У прикладі псевдоелементу спеціально задано висоту і фоновий колір для демонстрації, в реальності використовується нульова висота і не задається фон:


				<div class="example clearfix">

				  <div class="box left">float: left;</div>

				  <div class="box right">float: right;</div>

				  <div class="clearfix"></div>

				</div>


				.example { padding: 16px; border: 4px solid red;}

				.clearfix:after { content: ""; display: block; clear: both;}

				.example .box { border: 2px solid blue;}

				.example .left { float: left; width: 250px; height: 60px;}

				.example .right { float: right; width: 400px; height: 80px;}

Результат:

float: left;

float: right;

У чужому коді ви можете зустріти цей очищуючий клас під назвами clr, clear, clearfix.

Домашнє завдання

В своїх проектах очищуйте плаваючі блоки (float) за допомогою псевдоелемента :after замість тега <div class="clearfix">.

Корисне посилання про види меню.