- Стилизация ссылок в zero block

#Эффект

Стилизация ссылок в zero block

Мерцающая тень

Без тени

Ещё один элемент с тенью

Модификация добавляет стиль ссылке на выбор: цвет, подчеркивание или цвет с подчеркиванием до и после наведения. Можно назначить разные стили ссылкам, либо единый стиль всем ссылкам в zero block. Решение применяется для текстовых элементов в zero block, в которых прописана ссылка.

Как сделать стандартную стилизацию ссылкам
Ссылку можно задать текстовому элементу в настройках zero block или слову/фразе внутри текстового элемента через верхнюю панель.

Укажи в настройках ниже цвет текста, толщину и цвет подчеркивания, отступ над подчеркиванием до и после наведения. Если нужно, чтобы при наведении не было изменений, то укажи до и после одинаковые значения. Если нужно сделать подчеркивание прозрачным, то укажи значение transparent.
Пропиши уникальный класс в настройках ниже, если нужно использовать разные стили для ссылок в zero block. Для каждого стиля ссылки используй разные классы. Например, класс .link-effect (обязательно с точкой!). Этот класс пропиши текстовому элементу, в котором находится ссылка. Оставь поле пустым, если нужно использовать единый стиль для ссылок в zero block на всем сайте.
Скопируй сгенерированный код и вставь на свой сайт.

Цвет выделения текста в Тильде

Контейнер для демонстрации кода

 <style> [data-elem-type="text"] a {
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: 0 !important;
    /* цвет ссылки до наведения #bdbdbd*/ color: #bdbdbd !important;
    /* толщина и цвет подчеркивания до наведения */ border-bottom: 1px solid transparent !important;
    /* отступ между ссылкой и подчеркиванием до наведения */ padding-bottom: 2px !important; 
}

[data-elem-type="text"] a:hover {
    /* цвет ссылки после наведения */ color: #e42e3a !important;
    /* толщина и цвет подчеркивания после наведения */ border-bottom: 3px solid #e42e3a !important;
    /* отступ между ссылкой и подчеркиванием после наведения */ padding-bottom: 2px !important; 
}
</style>

CONTACT ME