Ефект накладання підкреслення на текст – це один із найпростіших, але водночас ефективних способів привернення уваги користувача на вашому сайті. Він може використовуватися як для прикраси тексту, так і для позначення посилань або активних елементів на сторінці. У цій статті ми розглянемо, як створити такий ефект за допомогою CSS Elementor.
Крок 1: Створення текстового елемента Elementor
Першим кроком є створення текстового елемента Elementor. Для цього відкрийте сторінку, на якій потрібно додати цей ефект, і перейдіть до режиму редагування Elementor. Потім перетягніть елемент тексту на сторінку з панелі елементів. Налаштуйте текст на свій розсуд, виберіть шрифт і колір.
Крок 2: Додавання класу до тексту
Щоб створити ефект підкреслення тексту, ми повинні додати клас до текстового елементу. Для цього клацніть правою кнопкою миші на текстовому елементі та оберіть “Edit section”. Потім знайдіть поле “CSS Classes” у розділі “Advanced” та введіть ім’я класу, наприклад “underline-effect”.
Крок 3: Написання CSS-коду
Тепер ми можемо написати CSS-код для створення ефекту підкреслення тексту. Додайте наступний код до розділу “Custom CSS” в Elementor:
.underline-effect {
position: relative;
}
.underline-effect::before {
content: “”;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.underline-effect:hover::before {
visibility: visible;
transform: scaleX(1);
}
Цей код створює псевдоелемент::before, який є невидимим і знаходиться під текстом. При наведенні курсору на текст ми змінюємо значення властивостей “visibility” і “transform”, щоб показати підкреслення.
Крок 4: Застосування ефекту до тексту
Щоб застосувати ефект підкреслення тексту, поверніться до редагування текстового елемента та виберіть доданий раніше клас “underline-effect” у розділі “Advanced” -> “CSS Classes”.
Крок 5: Перегляд змін
Збережіть зміни та оновіть сторінку, щоб переглянути результати. Тепер при наведенні курсору на текст ви побачите ефект підкреслення.
Насамкінець, ми розглянули, як створити простий, але ефективний ефект підкреслення на тексті за допомогою CSS в Elementor. Цей ефект може бути використаний для прикраси тексту або для позначення посилань та активних елементів на сторінці. Дотримуючись наших кроків, ви можете швидко і легко додати цей ефект на свій сайт в Elementor без необхідності використання додаткових плагінів.
