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

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

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

Вариант 1:

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

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

Вариант 2:

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

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

Вариант 3:

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

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

Вариант 4:

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

Вариант 5:

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

Вариант 6:

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

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

Вариант 7:

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

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

Похожие записи:

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

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