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

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

    Каскадний аркуш стилів (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: "; що, очевидно, відкриє набагато більше можливостей у практиці веб-дизайну в майбутньому. Поки вони реалізуються в поточних браузерах, давайте терпеливо чекаємо зараз.