Розуміння псевдоелемента до і після

Каскадний аркуш стилів (CSS) призначений в першу чергу для застосування стилів до розмітки HTML, однак у деяких випадках, коли додавання додаткової розмітки до документа є зайвим або неможливим, насправді є функція в CSS, яка дозволяє нам додавати додаткову розмітку без порушення фактичний документ, а саме псевдоелементи.

Ви чули про цей термін, особливо коли ви дотримувалися деяких наших навчальних посібників.

Насправді є декілька членів сімейства CSS, які класифікуються як псевдоелементи наприклад, :перша лінія, : перша буква, :: вибір, : раніше і : після. Але, для цієї статті, ми обмежимо наше висвітлення тільки на : раніше і : після, “псевдоелементи” тут будуть конкретно згадані обидва з них. Ми розглянемо цю тему з основ.

Підтримка синтаксису та браузера

The псевдоелементи фактично були навколо з CSS1, але : раніше і : після що ми обговорюємо тут, були випущені в CSS2.1. Спочатку псевдоелементи для синтаксису використовуйте single-dvon, тоді як web розвивався, у CSS3 the псевдоелементи були переглянуті, щоб використовувати двокрапку :: раніше & :: після - щоб відрізнити його з псевдокласи (тобто. : hover, : active, і так далі).

Однак, незалежно від того, чи використовується формат з двокрапкою або двокрапкою, браузери все одно розпізнаються. Оскільки Internet Explorer 8 підтримує лише формат з двокрапкою, безпечніше використовувати двокрапку, якщо потрібно більш широку сумісність із веб-переглядачем.

Що це робить?

Коротше кажучи псевдоелементи вставить додатковий елемент раніше або після елемент контенту, тому, коли ми додаємо їх обох, вони технічно рівні, з наступною розміткою.

: раніше Це основний зміст. : після

Але ці елементи насправді не генеруються на документі. Вони все ще видно на поверхні, але ви не знайдете їх на джерелі документа, так що практично кажучи, вони є підробка елементи.

Використання псевдоелементів

Використання псевдоелементи відносно легко; наступний синтаксис селектор: раніше додасть елемент раніше селектор контенту під час цього синтаксису селектор: після додасть після нього, і для додавання вмісту всередині них ми зможемо використовувати зміст власності.

Наприклад, фрагмент нижче додасть лапки перед і після блоку.

 blockquote: до content: open-quote;  blockquote: після content: close-quote;

Укладання псевдоелементів

Незважаючи на те, що він є підробленим елементом, псевдоелементи насправді діяти як a “реальний” елемент; ми можемо додавати до них будь-які декларації стилів, такі як зміна кольору, додавання фону, налаштування розміру шрифту, вирівнювання тексту всередині нього і так далі.

 blockquote: до content: open-quote; розмір шрифту: 24pt; text-align: center; висота рядка: 42px; колір: #fff; фон: #ddd; поплавок: лівий; позиція: відносна; зверху: 30px;  blockquote: після content: close-quote; розмір шрифту: 24pt; text-align: center; висота рядка: 42px; колір: #fff; фон: #ddd; поплавок: праворуч; позиція: відносна; знизу: 40px;

Визначення розмірності

Згенеровані елементи за замовчуванням є елементом вбудованого рівня, тому, коли ми збираємося вказати висоту і ширину, потрібно спочатку визначити його як блок-елемент, використовуючи дисплей: блок декларації.

 blockquote: до content: open-quote; розмір шрифту: 24pt; text-align: center; висота рядка: 42px; колір: #fff; фон: #ddd; поплавок: лівий; позиція: відносна; зверху: 30px; кордон-радіус: 25px; / ** визначають його як блок-елемент ** / дисплей: блок; висота: 25px; ширина: 25px;  blockquote: після content: close-quote; розмір шрифту: 24pt; text-align: center; висота рядка: 42px; колір: #fff; фон: #ddd; поплавок: праворуч; позиція: відносна; знизу: 40px; кордон-радіус: 25px; / ** визначають його як блок-елемент ** / дисплей: блок; висота: 25px; ширина: 25px;

Додайте фонове зображення

Ми також можемо замінити вміст зображенням, а не тільки звичайним текстом. Хоча зміст власність забезпечує url () рядок, щоб вставити зображення, але в більшості випадків я віддаю перевагу використанню фону властивість для більшого контролю над зображенням.

 blockquote: до content: ""; розмір шрифту: 24pt; text-align: center; висота рядка: 42px; колір: #fff; поплавок: лівий; позиція: відносна; зверху: 30px; кордон-радіус: 25px; фон: url (images / quotationmark.png) -3px -3px #ddd; дисплей: блок; висота: 25px; ширина: 25px;  blockquote: після content: ""; розмір шрифту: 24pt; text-align: center; висота рядка: 42px; колір: #fff; поплавок: праворуч; позиція: відносна; знизу: 40px; кордон-радіус: 25px; фон: url (images / quotationmark.png) -1px -32px #ddd; дисплей: блок; висота: 25px; ширина: 25px;

Проте, як видно з наведеного вище фрагмента, ми все одно оголошуємо зміст властивість і на цей раз порожній рядок. The зміст власність вимога і завжди повинні застосовуватися; в іншому випадку псевдоелемент не працюватиме взагалі.

Об'єднання з псевдокласами

Хоча вони різні псевдо, ми можемо використовувати псевдокласи разом з псевдоелементи разом у одному правилі CSS, наприклад, якщо ми хочемо повернути фон цитати котирування трохи темніше, коли ми наближаємося блоку.

 blockquote: hover: after, blockquote: hover: before background-color: # 555;

Додавання ефекту переходу

І ми можемо навіть застосувати перехід властивість створювати витончений ефект переходу кольору.

 перехід: всі 350 мс; -o-перехід: всі 350ms; -моз-перехід: всі 350мс; -webkit-transition: всі 350ms;

На жаль, ефект переходу, здається, працює лише в останній версії Firefox. Сподіваємося, що більше браузерів наздожене, щоб дозволити застосуванню властивості переходу псевдоелементи в майбутньому.

Демо
Завантажити джерело

Більше натхнення

Щоб надихнути вас, ми вибрали три цікаві приклади, які можуть дати вам ідеї для вашого веб-дизайну.

Захоплюючі тіні

У цьому підручнику Пол Андервуд пояснив, як створити більш реалістичний і захоплюючий ефект тіні : раніше і : після псевдоелементи. Обидва вони розташовані абсолютно і розміщені на самому задньому негативний z-індекс значення.

Ефект накладеного зображення

Використання псевдоелементи Можливо також створення ефекту безладного стекового зображення тільки з одним зображенням на розмітці. The псевдоелементи використовується для створення ілюзії складених зображень в задній частині фактичного зображення за допомогою негативного z-індекс.

Висновок

Pseudo-елементи це просто “прохолодно” і в кінцевому підсумку корисним, в основному ми маємо два бонусних елемента для кожного елемента, який ми додаємо, не втручаючись у фактичну структуру HTML взагалі, а потім перетворюючи їх на майже все, що ми можемо собі уявити.

Насправді є певні поліпшення псевдоелементи що зараз розробляється, наприклад вкладання псевдоелементів div :: before :: before content: "; і кілька псевдоелементів div :: before (3) content: "; що, очевидно, відкриє набагато більше можливостей у практиці веб-дизайну в майбутньому. Поки вони реалізуються в поточних браузерах, давайте терпеливо чекаємо зараз.