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

Эффект подчёркивания при наведении на ссылку

Категория: Сайтостроение, Опубликовано: 2016-08-05
Автор:

Здравствуйте, дорогие друзья!

В данной статье я покажу вам как сделать плавное подчёркивание ссылки при наведении.
Этот интересный эффект можно использовать как для ссылок, находящихся внутри определённого блока, так и для всех ссылок на сайте. Данный эффект при наведении создаётся при помощи CSS.

Навигация по статье:

  • Как создать эффект плавного подчёркивания ссылки при наведении?
  • Куда вставлять весь этот код?

И будет он состоять всего из нескольких строчек кода.

Для того чтобы посмотреть как выглядит плавное подчёркивание ссылки при наведении просто наведите курсор на одну из ссылок ниже:

Ссылка 1
Ссылка 2
Ссылка 3

Как создать эффект плавного подчёркивания ссылки при наведении?

Предположим у Вас есть блок с классом «link» и внутри него есть ссылки, для которых нужно применить данный эффект при наведении.

<div> <a href=»#»>Ссылка 1</a> <a href=»#»>Ссылка 2</a> <a href=»#»>Ссылка 3</a> </div>

<div>

<a href=»#»>Ссылка 1</a>

<a href=»#»>Ссылка 2</a>

<a href=»#»>Ссылка 3</a>

</div>

Сначала нам нужно задать для этих ссылок несколько CSS свойств, для того чтобы к ним можно было применить данный эффект при наведении. Я оставила комментарий возле каждого свойства так что вы сможете поменять некоторые параметры, чтобы ссылки лучше подходили под дизайн вашего сайта.

.link a { text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/ display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный*/ line-height: 1; /*Задаём высоту строки (можно в пикселях)*/ color:#2F73B6;/*Задаём цвет ссылки*/ }

1

2

3

4

5

6

. link a {

text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/

display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный*/

line-height: 1; /*Задаём высоту строки (можно в пикселях)*/

color:#2F73B6;/*Задаём цвет ссылки*/

}

Теперь для того чтобы создать плавное подчёркивание ссылки при наведении нам нужно при помощи CSS добавить псевдоэлемент after. Именно этот элемент и будет представлять собой плавно появляющуюся линию подчёркивания. Для него нам нужно прописать следующие свойства:

.link a:after { display: block; /*превращаем его в блочный элемент*/ content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/ height: 3px; /*задаём высоту линии*/ width: 0%; /*задаём начальную ширину элемента (линии)*/ background-color: #225384; /*цвет фона элемента*/ transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины.

Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/ }

1

2

3

4

5

6

7

8

.link a:after {

    display: block; /*превращаем его в блочный элемент*/

    content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/

    height: 3px; /*задаём высоту линии*/

    width: 0%; /*задаём начальную ширину элемента (линии)*/

    background-color: #225384; /*цвет фона элемента*/

    transition: width 0.4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/

}

И на последнем этапе создания плавного подчёркивания ссылки нужно задать для песевдоэлемента after ширину 100% при наведении, а также при установленном курсоре. В этом нам помогут псевдоклассы :hover и :focus.
Выглядеть это будет так:

. link a:hover:after, .link a:focus:after { width: 100%; }

.link a:hover:after,

.link a:focus:after {

    width: 100%;

}

То есть изначально наш псевлоэлемент имеет ширину 0%, а при наведении она плавно становится 100%.
Также можно сделать так чтобы при наведении на ссылку помимо эффекта плавного подчёркивания происходила также смена цвета ссылки.

Для этого дописываем следующее:

.link a:hover{ color:#225384; }

.link a:hover{

color:#225384;

}

Если вы хотите чтобы данный эффект применялся для всех ссылок на вашем сайте, то вместо «.link a» нужно будет писать «а».

Чтобы не сбивать вас с толку даю весь код вместе. В этом коде эффект плавного подчёркивания применится ко всем ссылкам на сайте:

a { text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/ display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный line-height: 1; /*Задаём высоту строки (можно в пикселях)*/ color:#2F73B6;/*Задаём цвет ссылки*/ } a:after { display: block; /*превращаем его в блочный элемент*/ content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/ height: 3px; /*задаём высоту линии*/ width: 0%; /*задаём начальную ширину элемента (линии)*/ background-color: #225384; /*цвет фона элемента*/ transition: width 0.

4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/ } a:hover:after, a:focus:after { width: 100%; } a:hover{ color:#225384; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

a {

text-decoration:none; /*Убираем стандартное подчёркивание ссылки если оно ещё не убрано*/

display: inline-block; /*делаем чтобы наша ссылка из строчного элемента превратилась в строчно-блочный

line-height: 1; /*Задаём высоту строки (можно в пикселях)*/

color:#2F73B6;/*Задаём цвет ссылки*/

}

 

a:after {

    display: block; /*превращаем его в блочный элемент*/

    content: «»; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/

    height: 3px; /*задаём высоту линии*/

    width: 0%; /*задаём начальную ширину элемента (линии)*/

    background-color: #225384; /*цвет фона элемента*/

    transition: width 0. 4s ease-in-out; /*данное свойство отвечает за плавное изменение ширины. Здесь можно задать время анимации в секундах (в данном случае задано 0.4 секунды)*/

}

 

a:hover:after,

a:focus:after {

    width: 100%;

}

 

a:hover{

  color:#225384;

}

После добавления данного кода просто сохраняете файл и всё! Всё очень просто не правда ли?! Вот за что я люблю CSS3! С его помощью можно за несколько минут создать очень интересные эффекты и при этом не нужно подключать дополнительных библиотек и т.д.

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

CSS код со всеми прописанными свойствами нужно вставить в CSS файл вашего сайта или вашей темы (если сайт работает на CMS)

Для WordPress этот файл будет находиться по адресу:

wp-content/themes/название темы/style.css

Для Opencart этот файл находится по адресу:

catalog/view/theme/название темы/stylesheet/stylesheet.css

Данный CSS код нужно вносить в самый конец CSS файла.

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

С уважением Юлия Гусарь

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

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

<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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как создать эффект подчеркивания на зависших ссылках в css

спросил

Изменено 5 лет, 5 месяцев назад

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

Стиль, который я пытаюсь достичь, можно показать на этом снимке экрана:.

Подскажите, пожалуйста, как создать указанный мной эффект с помощью CSS. 9

Используя :hover и установив border-bottom . Что-то вроде этого

 ул{
  стиль списка: нет;
  заполнение: 0;
  маржа: 0;
}
уль ли {
  плыть налево;
  поле: 0 5px;
}
уль ли а {
  текстовое оформление: нет;
  черный цвет;
}
уль ли: наведите {
  нижняя граница: 2 пикселя сплошного красного цвета;
} 
 <ул>
  
  • Главная
  • О нас
  • Контакты
  •  а {
            отображение: встроенный блок;
            положение: родственник;
            текстовое оформление: нет;
            выравнивание текста: по центру;
        }
    
        а: наведите: до {
            содержание: '';
            ширина: 100%;
            высота: 100%;
            положение: абсолютное;
            слева: 0;
            внизу: 0;
            box-shadow: вставка 0 -10px 0 #11c0e5;
        }
    
        промежуток {
            дисплей: блок;
            ширина: 100 пикселей;
            высота: 40 пикселей;
            цвет фона: красный;
            отступы сверху: 20px;
        } 
     
        тексты ссылок
        
       

    3

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

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

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

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

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

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

    Требуется, но никогда не отображается

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

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

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

    Почему селекторы CSS на ссылках сложны с подчеркиванием при наведении?

    спросил

    Изменено 1 год, 1 месяц назад

    Просмотрено 5к раз

    Вот два примера на основе этого HTML.

     
        <дел>
            Привет
            мир
        

    В первом случае я делаю так, чтобы ссылка не подчеркивалась при наведении курсора, затем подчёркивалась часть ссылки, и это работало нормально:

     а {
        текстовое оформление: нет;
    }
    а: наведите {
        текстовое оформление: нет;
    }
    a: наведите курсор на .bar {
        оформление текста: подчеркивание;
    }
     

    http://jsfiddle.net/3qPyX/1/

    Во втором я переворачиваю селекторы так, чтобы второе слово было и — подчеркнутым. Однако сейчас происходит нечто странное. Вся ссылка остается подчеркнутой, даже если селекторам кажется, что они должны убрать подчеркивание со второго слова. <-- (вот вопрос. почему так происходит?)

     а {
        текстовое оформление: нет;
    }
    а: наведите {
        оформление текста: подчеркивание;
    }
    a: наведите курсор на .bar {
        текстовое оформление: нет;
    }
     

    http://jsfiddle.net/EAmwt/

    Кто-нибудь может объяснить, что не так во втором примере? Проверка с помощью Chrome показывает, что span. bar имеет вычисляемый стиль text-decoration:none .

    Обновление: несколько ответов, объясняющих, как обойти проблему, и это здорово, за исключением того, что это не совсем мой вопрос. Я хочу знать почему это поведение отличается от, скажем, жирного шрифта? Например, если я попробую второй пример с жирным шрифтом, я получу ожидаемые результаты: http://jsfiddle.net/3qPyX/4/

    • css
    • css-selectors

    6

    Объяснение:

    Проблема в том, что некоторые свойства (такие как text-decoration) отрисовываются для всего родительского встроенного элемента, тогда как другие, такие как стили шрифта (которые унаследованы), переопределяются дочерними свойствами.

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

    Более подробную информацию о свойстве text-decoration можно найти в спецификациях CSS уровня 2 и уровня 3.


    Простое решение

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

    Вот так:

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

    И встроенный блок вырывается из встроенного/текстового стиля родительского элемента привязки =) И тогда вы можете стилизовать его независимо:

    4

    Когда вы делаете украшение текста , оно применяется ко всей строке сразу. Таким образом, a:hover .bar не вызывает никакого эффекта, потому что подчеркивание применяется не к .bar , а к a .

    Вот спецификация: http://www.

    Оставить комментарий

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *