Оформление ссылок внутри контента

Пару лет назад уже была заметка об оформлении таких ссылок, и эта является ее продолжением.

Во всех примерах в заметке нет необходимости прописывать классы для самих ссылок, а нужно просто добавить стили для контейнера, в котором они находятся.

Вариант 1:

Для просмотра эффекта наведите курсор на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект ее подчеркивания.

Цвет почеркивания задается в параметре stroke='%23337AB7'. 337AB7 - цвет в HEX

Вариант 2:

Для просмотра эффекта наведите курсор на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект ее подчеркивания.

Ссылки имеют стиль display: inline-block; и если они не уместятся в 1 строку, то перенесутся на другую.

Вариант 3:

Для просмотра эффекта наведите курсор на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект ее подчеркивания.

Ссылки имеют стиль display: inline-block; и если они не уместятся в 1 строку, то перенесутся на другую.

Вариант 4:

Для просмотра эффекта наведите курсор на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект ее подчеркивания.

Вариант 5:

Для просмотра эффекта наведите курсор на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект ее подчеркивания.

Вариант 6:

Для просмотра эффекта наведите курсор на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект ее подчеркивания.

Ссылки имеют стиль display: inline-block; и если они не уместятся в 1 строку, то перенесутся на другую.

Вариант 7:

Последний пример срабатывает при клике (при наведении не смотрится) и использует JavaScript.

Для просмотра эффекта кликните на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект при клике.

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

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

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

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

  • Александр:

    Спасибо за ресурс.
    Проблема из 2-го примера с z - индексом: при -1 фон проваливается и его не видно, при 0 всплывающий фон перекрывает текст ссылки....

    Ответить
    • Alexander:

      Попробуйте добавить к самой ссылке z-index, например:

      .container-2 a {
      	z-index: 10;
      }
      Ответить