Привіт, дорогі друзі.
Хочу поділитися з Вами інформацією про двох псевдоелементи, якими мало хто користується, просто тому що не чули про них. Ці псевдоелементи дуже полегшують верстку, особливо досить складних проектів з дуже великою кількістю дрібних деталей, типу стрілок, кружечків, різний ліній над елементами і під ними і так далі.
І так, давайте розберемо реальний приклад. Нам потрібно зверстати ось такий простий блок:
Як ми бачимо у нас звичайний контейнер з текстом і зліва у нас знаходиться трикутник. Хто не працював з псевдоелементи before і after. швидше за все почали б робити цей трикутник картинкою. Але все набагато простіше, ніж ви думаєте.
З HTML сподіваюся питань немає. Давайте розберемо трохи CSS. Спочатку призначаємо ширину і висоту елемента, далі фарбуємо фон в білий колір, вирівнюємо елемент по центру по горизонталі і робимо невеликий відступ зверху і знизу. Так само робимо внутрішній відступ в 20 пікселів, закруглюємо краю елемента і виставляємо відносне позиціонування. Завдяки відносного позиціонування елемента ми зможемо з легкістю створити наш трикутничок.
Тепер переходимо до десерту. Before і After дозволяють нам вставляти будь-якої контент до \ після вмісту будь-якого елементу. Зробіть ось так: додайте ось такі стилі після стилів елемента з класом .container
У властивості content: "; пишемо будь-який текст, який хочете відобразити до \ після елемента. Це особливість цих псевдоелементів, без цієї властивості у Вас нічого не вийде.
Так а як же зробити трикутник? Чи можна вставляти зображення в властивість content? Ні, не можна. Щоб Вас не плутати, ось вам готовий CSS для створення такого трикутника, давайте його розберемо.
Давайте зробимо трикутник праворуч зверху. Для цього пишемо такий код:
Або наприклад зверху і по центру:
Ось так ось, все дуже просто. Ми так само можемо зробити два трикутника, адже у нас два псевдоелемента.
До речі, якщо Вам потрібен всього один трикутничок, то неважливо чи будете ви використовувати before або after. Тут вже справа смаку. Мені наприклад більше подобається використовувати after.
І давайте розберемо ще один простий приклад. Наприклад нам треба зробити ось таку смужку над або під елементом.
Завдання начебто проста, але без before і after досить неприємна.
Вирішується все просто.
Знову ж content порожній. Створюємо елемент шириною в 130 пікселів і 4 пікселя в висоту. Фарбуємо в червоний колір, робимо елемент блоковим і вирівнюємо по центру. Тут ми обійшлися без позиціонування.
На цьому все, сподіваюся все було зрозуміло і ваш рівень верстальника піднявся на пару відсотків. Всім гарного дня.