Решение подходит для выделения важного слова или слов в заголовках

Пример:

Анимированное подчеркивание текста

HTML:

CSS:

Смотрите также:

Анимированная кнопка включения/выключения - Power / Standby

Функция на jQuery, которая позволяет скопировать нужный текст в буфер обмена пользователя

SVG фильтры, которые заставляют дрожать любые элементы сайта

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Станислав:

    ))) Шикарно. Всё работает. Спасибо!

    Ответить
  • Станислав:

    Здравствуйте. Там оба кода стоит. Подчёркивание не сработало, я поставил чуть выше зачёркивание. Пробовал несколько раз и проверял. Вот и сейчас всё заново заменил и HTML и CSS По непонятной причине нет подчёркивания. Вот я и напечатал сюда, что может препятствовать этому думаю. Подчёркивание прикольное.

    Ответить
    • Alexander:

      Понял
      Удалите у класса .underline svg
      z-index: -1;
      А лучше добавьте сюда z-index: 1;

      .underline span {
          position: relative;
          z-index: 1;
      }
      Ответить
  • Станислав:

    https://lityo-otlivok.ru/oplata/

    Ответить
    • Alexander:

      У вас что то напутано.
      Если речь идет о подчеркивание, как в этой теме, то нужен SVG
      У вас же стоит код из другой темы (зачеркивание), где оформляется тег <del>
      Он у вас правильно, только на ховере не нужно

      del:hover:before {
          top: 0;
      }
      Ответить
  • Станислав:

    Здравствуйте. Что-то не работает.. что может мешать подчёркиванию?

    Ответить
    • Alexander:

      Нужно смотреть, дайте ссылку на результат

      Ответить
  • Дава:

    Увидел на одном сайте, и вот случайно нашел у вас! спасибо большое!

    Ответить