Подчеркивание при наведении на ссылку: Плавное подчёркивание ссылки при наведении

Leave a Comment / Разное / By /

Содержание

html — Подчеркивание текста ссылок при наведении

Вопрос задан

Изменён 7 лет 3 месяца назад

Просмотрен 7k раз

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

<ul> 
    <li>
        <a href="">Текст</a>
    </li>
<ul>

Если элементы списка представлены inline-block‘ом и подчеркивание распространяется на весь блок?

  • html
  • css
2

Используйте text-decoration: underline;
На него не влияет свойство display;

HTML:

<ul>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
</ul>

CSS:

ul li {
    display: inline-block;
}
ul li:hover {
    text-decoration: underline;
}

Пример в fiddle

Также возможно:

Пример 1 — использовать border

ul{
    padding-left: 0;
    text-align: center;
}
ul > li{
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
}
ul > li a{    
    text-decoration: none;
    font-size: 15px;
    font-family: 'segoe ui';
    color: #000;
    border-bottom: 2px solid transparent;
}
ul > li a:hover{
    border-bottom: 2px solid #f00; /* вместо этого цвета можно использовать любой другой */
}
<ul> 
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
<ul>

Пример 2 — использовать псевдоэлементы — :before or :after

ul{
    padding-left: 0;
    text-align: center;
}
ul > li{
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
}
ul > li a{    
    text-decoration: none;
    font-size: 15px;
    font-family: 'segoe ui';
    color: #000;
    position: relative;    
}
ul > li a:hover:after{
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 100%;
    height: 2px;
    background: #f00;   
}
<ul> 
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
    <li><a href="#">Текст</a></li>
<ul>

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как убрать подчёркивание ссылок — журнал «Доктайп»

По умолчанию все ссылки подчёркнуты синим, но такое оформление легко изменить с помощью CSS-свойства text-decoration: none.

Убираем подчёркивание ссылок в CSS

Допустим, у вас есть ссылка:

<a href="#form">Каталог товаров</a>

Чтобы убрать нижнее подчёркивание, откройте файл со стилями и пропишите:

.link {
  text-decoration: none;
}

Вместо селектора по классу можно использовать и другие, например, селектор по типу элемента или атрибуту id.

Убираем подчёркивание ссылок в HTML

Если у вас нет доступа к стилевому файлу или на работе принято инлайнить стили, можете убрать подчёркивание прямо в HTML.

Сбросить стили в одной ссылке:

<a href="#">Какая-то ссылка</a>

Убрать оформление во всех ссылках:

<head>
  <style>
    а {
      text-decoration: none;
    }
  </style>
</head>

Селектор может быть любым — мы для примера показали селектор тега.

Будьте осторожны при сочетании инлайн-стилей и внешнего CSS, ведь стили в атрибуте style сложно переопределить. Если вы ещё не знакомы с конфликтом свойств, советуем пройти раздел курса для новичков по HTML и CSS — это бесплатно.

Когда убирать подчёркивание

Убирайте подчёркивание, если планируете стилизовать ссылку как кнопку или другой интерактивный элемент вроде карточки товара. В других случаях лучше его оставить, потому что подчёркивание ссылок привычно для пользователей. Если вы сбросите стили, посетителям сайта будет сложнее отличить ссылки от обычного текста.

Один и тот же блок текста, но справа хорошо видно ссылки, а слева — нет

Необязательно использовать стили по умолчанию — можно оформить ссылки иначе, например, добавив подчёркивание с помощью анимации, изменив его толщину и начертание или задав другой цвет:

Read Article — ссылки в фирменном цвете

А ещё можно убрать подчёркивание у ссылки и добавить его текстовому блоку, например за счёт border-bottom. Такой приём чаще используется для навигации — пользователь видит, что элементы меню кликабельные, и понимает, на какой странице он находится.

Так что, если вам не нравится, как выглядят ссылки — стилизуйте их по-своему. Примеры можете подсмотреть в статье про нестандартное подчёркивание текста на чистом CSS. Главное — не забывайте про UX и старайтесь поменьше инлайнить.

Читать дальше:

  • Как написать и запустить HTML на компьютере
  • Как сверстать макет. Пошаговый план
  • Шаблон простого сайта на HTML

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как создать рамку вокруг элемента. CSS-свойство border

Цветные, точечные, пунктирные рамки и многое другое.

CSS

  • 31 мая 2023

Как сделать анимацию любой сложности. Свойство animation

Примеры и нюансы использования.

CSS

  • 29 мая 2023

Как создать тени на CSS: свойство box-shadow

Внутренние, внешние, с градиентом — на все случаи жизни.

CSS

  • 28 мая 2023

Как установить стиль шрифта. CSS-свойство font

Семейства шрифтов, начертание и размеры.

CSS

  • 27 мая 2023

Как работает transform в CSS на примерах

Интерактивная статья — попробуйте анимировать сами.

CSS

  • 23 мая 2023

Как оформить текст: 11 главных CSS-свойств

Инструкция для любителей поиграться со шрифтами.

CSS

  • 23 мая 2023

Трансформации в CSS с примерами

Добавляем нескучные эффекты к элементам.

CSS

  • 21 мая 2023

Как добавить изображение фоном. Свойство background-image

Каков путь выберите сами.

CSS

  • 20 мая 2023

Как создать сетку на странице.

CSS-свойство flex

Значения и нюансы использования

CSS

  • 18 мая 2023

Как создать сетки на CSS Grid Layout

Чтобы сайт был красивым, а вёрстка не ломалась.

CSS

  • 17 мая 2023

html — подчеркивание тега при наведении

Я хочу, чтобы мой тег подчеркивался при наведении. У меня есть следующий код, но он не работает.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



    <название>
    <тип стиля="текст/CSS">
     a.hover: hover {украшение текста: подчеркивание;}
     

<тело>
    

    <дел>
    Карта сайта

Это:

 a:hover {украшение текста: подчеркивание;}
Карта сайта

тоже не работает.

Что мне делать? В чем проблема?

  • html
  • css
  • tags

Атрибут стиля более конкретен, чем любой селектор, поэтому он всегда будет применяться последним в каскаде (ужасно !важно 900 04 правил не нарушая). Переместите CSS в таблицу стилей.

 a.hover {
    красный цвет;
    текстовое оформление: нет;
}
а.наведите: наведите {
    оформление текста: подчеркивание;
}

(я также предлагаю более смысловое имя для класса).

0

Встроенный стиль переопределяет стиль на странице.

Удалите встроенный стиль и используйте это: