Подчеркивание ссылки css пунктиром: Как добавить пунктирное подчеркивание к ссылкам?

html — Как сделать пунктирную ссылку при наведении?

спросил 9 лет, 8 месяцев назад

Изменено 2 года, 10 месяцев назад

Просмотрено 36 тысяч раз

У меня есть ссылка Мои статьи

и мои css .link-articles { text-decoration: underline; цвет синий; }

Однако при наведении я хотел бы, чтобы вместо синего подчеркивания было красное подчеркивание, но текст должен оставаться синим, и только подчеркивание меняет цвет на красный.

Как это сделать?

• html
• css

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

 . link-статьи
{
    нижняя граница: сплошной синий 1px;
    текстовое оформление: нет;
}
.link-статьи: hover
{
    цвет нижней границы: красный;
}
 

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

Дополнительным преимуществом этого подхода является возможность позиционировать подчеркивание с помощью высоты строки и использовать альтернативные стили линий, заменяя сплошной на пунктирный или пунктирный .

Подход без полей:

Как указывает @Pacerier в комментариях, вот альтернативная стратегия с использованием псевдоклассов и содержимого CSS (JSFiddle):

 .link-статьи
{
    положение: родственник;
}
.link-статьи[href="#articles"]:после
{
    контент: «Мои статьи»;
}
.link-статьи: после
{
    красный цвет;
    слева: 0;
    положение: абсолютное;
    сверху: 0;
}
 

Однако при сглаживании возможно некоторое смешивание цветов по краям текста. Если вам не нравится идея вручную помещать содержимое в свой CSS, вы можете использовать атрибут или повторяющийся элемент.

5

Используйте border-bottom :

 a:hover.link-articles {border-bottom: 1px с красной точкой; украшение текста: нет;}
 

Посмотреть демонстрацию

Просто выполните:

 a:hover {
  стиль оформления текста: пунктирный
}
 

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

Использовать рамку:

 .link-articles { text-decoration: none; нижняя граница: синяя сплошная 1px; }
.link-articles:hover {граница-нижняя: красная точка 1px; }
 

 .link-articles { text-decoration: none; нижняя граница: 1px пунктирная синяя; }
.link-articles:hover { text-decoration: none; нижняя граница: 1 пиксель с красной точкой; }
 

0

Попробуйте это:

 . link-articles{ text-decoration: none; нижняя граница: 1px с точками; цвет границы: синий; }
 .link-статьи: hover { цвет границы: красный; }
 

DEMO

Показывать нижнюю границу при наведении:

 a.link-articles {
    текстовое оформление: нет;
    нижняя граница: 1px пунктирная синяя;
}
a.link-статьи: hover {
    нижняя граница: 1 пиксель с красной точкой;
}
 

2

Стиль :hover используется для установки стиля, когда пользователь наводит указатель мыши на элемент.

 .link-статьи { ... }
.link-статьи: наведите { ... }
 

И вы можете использовать свойство border-bottom вместо text-decoration

Вы можете использовать свойство CSS3 text-decoration-color , но, к сожалению, text-decoration-color 9Свойство 0012 не поддерживается ни в одном из основных браузеров.

Firefox поддерживает альтернативу, свойство -moz-text-decoration-color .

Ссылка: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

Поддержка браузера: http://caniuse.com/#search=text-decoration-color

JSFiddle (не t работает во всех браузерах)

Таким образом, лучший способ сделать это — использовать CSS-свойство border-bottom в качестве трюка.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css - многострочный пунктирный или пунктирный текст-подчеркивание

Поскольку подчеркивание текста в CSS допускает только сплошную линию, а ее положение находится прямо в нижней части строк, я использую border-bottom плюс небольшой отступ для получения пунктирного или пунктирного текста подчеркнуть.

 h3{border-bottom:1px с точками #999; заполнение снизу: 5px;}
 

 h3 {
  нижняя граница: 1px пунктир #999;
  дисплей: встроенный;
}