Css ссылка без подчеркивания: Ссылки без подчеркивания

Содержание

Нестандартное подчеркивание — Xiper

Автор: Евгений Рыжков Дата публикации:

Задача

Сделать особое оформление подчеркивания ссылок не прибегая к использованию дополнительных тегов. Примеры таких задач:

цвет подчеркивания ссылки отличается от цвета самой ссылки
сделать подчеркивание не сплошной линией (например, пунктирной)

Когда на странице много ссылок близко расположенных друг к другу, все их подчеркивания мешают восприимчивости текста, а иногда откровенно раздражают:

налепленные ссылки на europages

Но одно из основных правил юзабилити гласит, что ссылки на странице должны быть подчеркнуты, к этому все привыкли. Поэтому дизайнеры подчеркивания оставляют, но делают их приглушенными (более блеклым цветом или пунктиром):

приглушенное подчеркивание на livejournal.ru

пунктирное подчеркивание на b2b-club.ru

Решение

Для примера сделаем цвет подчеркивания отличным от цвета текста ссылки, плюс сразу сделаем его пунктиром.

Т.к. напрямую нельзя влиять на цвет и вид подчеркивания ссылки, воспользуемся свойством border-bottom:


a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
}

Очень простое решение. Таким же образом можно сделать любого вида подчеркивание используя свойство background-image при заданном background-position: left bottom.

Но данное решение не всегда подходит. Например, нужно оформить следующую ссылку:

При чем картинка должна быть тоже кликабильной. Попробуем простой путь:


a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
background: url(path-to/wheel.png) no-repeat;
padding-left: 47px;
}

Жаль, но такой вариант в данном случае не подойдет — подчеркивание у нас бордюром, а бордюр тянется по всей ширине элемента:

IE7 оказался более тендитным к применению свойств чисто блочных (padding-top и padding-bottom) к строчному элементу:

В общем, придется немного усложнить html код ровно на один элемент. Для этого возьмем нейтральный — span:


<a href="#"><span>Авто</span></a>


.wheel {
color: #FF6600;
text-decoration: none;
background: url(path-to/wheel.png) no-repeat;
padding: 8px 0 8px 47px;
font-size: 16px;
font-weight: bold;
color: #084463;
zoom: 1; /* spacial for ie 7 */
}
.wheel span {
border-bottom: 1px solid #b7d2e0;
}

Демо пример. Проверено в:

IE 6-7
Firefox 3
Opera 9.5 — 10
Safari 4.0

Заметки

В данном примере для IE сработал zoom (который в идеале лучше вынести в отдельный css, подключенный условными комментариями). Но он не всегда помогает. Если с zoom возникли какие-то проблемы (например, починило подчеркивание, но сломало верстку) заменяем zoom на position: relative.

Такой прием можно применять не только к ссылкам.

Задать цвет подчёркивания ссылок в CSS

«Как красиво оформить ссылки на сайте?» – такой вопрос часто встаёт перед веб мастером в процессе форматирования страниц. Стильно оформленные ссылки на странице привлекают внимание посетителей к анализу информации заключённой в ней и мотивируют к действию перехода по ссылке. Конечно, основную роль играет смысловой фактор, правильно подобранные анкоры и около ссылочный текст. Но всё же стилизация самой ссылки серьёзно усиливает вектор мотивации к переходу по ссылке. Эффект привлечения внимания к себе используется в живой природе. Например, цветы своей многоцветной палитрой привлекают к сбору нектара пчёл и так осуществляют необходимое опыление. И наоборот, когда нужно отвести внимание от своей персоны, цвета объекта могут подстраиваться под окружающую среду. В случае с ссылками всё аналогично. Бывают ситуации когда нам необходимо явно выделить ссылку из текста по какому-либо признаку, например изменить её цветовую палитру и наоборот заставить ссылку принять стиль применяемый в около ссылочном тексте.

Для HTML ссылок как правило используются парные теги <a> текст </a>. По умолчанию ссылки имеют стандартное форматирование – синий цвет текста с подчёркиванием. Такого оформления ссылки часто бывает недостаточно для явного увеличения значимости информации ведущей по ней. Например, это может быть обязательный к прочтению документ договора или правил оказания услуг. Одним из способов определить значимость информации может быть изменение цвета подчёркивания текста ссылки. Существуют два способа решения задачи.

CSS свойство text-decoration-color

Первый вариант решения использовать CSS-свойство text-decoration-color – задаёт цвет линии, которая добавляется через свойство text-decoration. Толщина линии зависит от размера шрифта.

HTML

<a href="#">Ссылка с подчёркиванием</a>

CSS

a {
	text-decoration-skip-ink: none;
	text-decoration: underline;
	text-decoration-color: red;
}
a:hover {
	text-decoration-color: #f56666;
}

CSS свойство border-bottom

Второй вариант — CSS-свойство border-bottom — задать цвет нижней грани рамки вокруг текста. Дополнительно устанавливает ширину и тип линии.

CSS

a {
	font-size: 16px;
	text-decoration: none;
	border-bottom: solid 2px red;
}
a:hover {
	border-bottom-color: #f56666;
}

Как видно на демонстрации – визуально результат подчёркивания практически одинаков, но в случае с нижней границей рамки можно ещё задать толщину и тип линии подчёркивания независимо от размеров текста.

Дата публикации: 2023-03-19

ТОП 10 случайных публикаций

Как удалить подчеркивание из ссылки в CSS

Последнее обновление: 9 апреля 2023 г.

IN — CSS

В этом уроке мы покажем вам, как удалить подчеркивание из ссылки в CSS, вы, возможно, захотите удалить подчеркивание по умолчанию из ссылки при стилизации веб-сайта. К счастью, CSS предоставляет различные варианты удаления подчеркивания из ссылки.

В этом руководстве вы узнаете, как использовать CSS для удаления подчеркивания в ссылках. Мы также покажем, как использовать CSS-свойство text-decoration для удаления подчеркивания ссылки в HTML.

Пошаговое руководство по удалению подчеркивания ссылки в CSS:-

Текст можно украсить с помощью атрибута text-decoration. Удаление подчеркивания может быть именно тем, что вы ищете с точки зрения внешнего вида, но вы должны действовать осторожно.

В следующих разделах мы рассмотрим, как использовать свойство text-decoration для полного удаления подчеркивания ссылок на вашем HTML-сайте.

Вот пример Как убрать подчеркивание ссылки в CSS

 

<голова>
<название>
<стиль>
.div а {
цвет: #000000;
текстовое оформление: нет;
}


<тело>
<дел>
Эта страница
Следующая страница

Штирлиц — Сеть печатных салонов в Перми

Css ссылка без подчеркивания: Ссылки без подчеркивания | htmlbook.ru