Эффект наложения подчеркивания на текст — это один из самых простых, но в то же время эффективных способов привлечения внимания пользователя на вашем сайте. Он может использоваться как для декорации текста, так и для обозначения ссылок или активных элементов на странице. В этой статье мы рассмотрим, как создать такой эффект с помощью 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 без необходимости использования дополнительных плагинов.