Как я могу заставить ссылку в HTML изменить цвет при наведении курсора и удалить подчеркивание с помощью CSS?

На моем веб-сайте у меня есть следующее CSS: a:hover{color:red;border-bottom:1px solid} Это показывает красное подчеркивание на текстовых ссылках при наведении курсора, что желательно. Однако это…

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

Я добавил на свой сайт ховерборд, который переворачивается, чтобы показать больше текста. Он хорошо работает только с хромом, поэтому я попробовал отключить его в Firefox. Он больше не…

У меня есть ссылка <a class=link-articles href=#articles>My Articles</a> и мой css .link-articles { text-decoration: underline; color: blue; } Однако при наведении курсора Я хотел бы…

Я не могу удалить подчеркивание при наведении курсора на этой странице: http:/ / www.

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

Можете ли вы подчеркнуть текст при наведении курсора с помощью css? (Как поведение ссылки, но не фактическая ссылка.) у вас есть следующий текст Привет работа когда вы наводите курсор мыши на текст,…

Показать подчеркивание в Якоре, если у вас есть href с помощью css <a class=myLink >click here</a> показать подчеркивание при наведении курсора <a class=myLink…

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

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

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

Для этого нам в стилях шаблона- style.css нужно найти a
и дописать следующей код

a { line-height: 1; display: inline-block; color:#0085ba; text-decoration:none; cursor: pointer; } a:after { display: block; content: &quot;&quot;; height: 2px; width: 0%; background-color: #0085ba; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }

Немного поясню код
text-decoration:none; — мы избавляемся от стандартного подчеркивание ссылки
Псевдоэлемент :after, добавляет дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition:. Ширину линии изначально выставим с нулевым значением width: 0%;, высоту определим в 2px. Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.
transition:. время\скорость анимации
Псевдоклассы:hover и :focus. Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке курсор. Здесь мы изменим значение ширины в 100%.
Выглядит это будет так

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

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

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

Например ссылки которые необходимо стилизовать как кнопки в 99% случаев не имеют подчеркиваний, даже в основном тексте ссылки выделят только цветом. И полоска внизу появляется только при ховере. Если вы желаете узнать как сделать анимацию при наведении на ссылку читайте нашу статью на блоге.

Как убрать нижнее подчеркивание у ссылок html?

За нижнее подчеркивание отвечает свойство text-decoration, его можно применять не только к ссылкам, но и другим элементам на странице к примеру h2-h6. Поддерживается всеми браузерами с первой версии. Далее предлагаю взглянуть значения свойства:

• line-through — перечеркивает ссылку
• overline — добавляет верхнее подчеркивание
• underline — добавляет нижнее подчеркивание
• none — убирает подчеркивание
• initial — устанавливает значение по умолчанию
• inherit — наследует это свойство от родительского элемента

Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none. Если мы собираемся применить правило ко всем ссылкам на странице пишем:

a {
  text-decoration: none;
}

Для конкретной ссылки мы можем использовать строчные (inline) стили. Такие стили обычно добавляют javascript скрипты.

<a href='google.com'>Google</a>

А так же явно указать правило ссылке через селектор класса, идентификатора или дочерний селектор.

.link {
	text-decoration: none;
}

#link {
	text-decoration: none;
}

.some-block a {
	text-decoration: none;
}

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

В случае с фокус состоянием также может быть обводка, которая совмещается с подчеркиванием. Ее можно убрать, но я не рекомендую этого делать. И так пример.

.link:hover,
.link:focus {
	text-decoration: underline;
color: red;
}

. link:focus {
	outline: none; //убираем обводку
color: red;
}

.link:focus {
	outline-color: brown; //меняем цвет обводки
color: red;
}

На этом у меня все, я надеюсь у вас не осталось вопросов по работе с свойством text-decoration. До встречи в новых статьях.

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

По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам. Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline. Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration. Вот CSS-код, с помощью которого это можно сделать:

a { text-decoration: none; }

С помощью этой строки кода можно удалить CSS underline style всех ссылок.

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

Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст (с помощью CSS underline color) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание (вместо того, чтобы вывести его полужирным шрифтом или курсивом), вы вводите пользователей сайта в заблуждение.

Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid«), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom:

a { text-decoration: none; border-bottom:1px dotted; }

Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

a { text-decoration: none; border-bottom:1px dashed; }

Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

a { text-decoration: none; border-bottom:1px solid red; }

Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:

a { text-decoration: none; border-bottom:3px double; }

a { border-bottom:1px double; }

Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline:

a { text-decoration: none; } 
a:hover { border-bottom:1px dotted; }

Данная публикация является переводом статьи «How to Change Link Underlines on a Webpage» , подготовленная редакцией проекта.

CSS оформление ссылок: убираем подчёркивание, меняем цвет

Селекторы псевдо-классов

Псевдо-классы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя, а также может зависеть от расположения элемента в дереве документа. Селекторы псевдо-классов начинаются с двоеточия — «:» и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:

span:hover { color: red; }

Ссылки

Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:

a:link { color: #0000ff; }

a:visited { color: #ff00ff; }

a:hover { color: #00ccff; }

a:active { color: #ff0000; } 

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

Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.

Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами <a>.

Подчеркивание ссылок

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      a { text-decoration: none; } 
      a:hover { text-decoration: underline; }  
    </style>
  </head>

  <body>
    <p><b><a href="#">обычная ссылка</a></b></p>
  </body>
</html>

Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div p:first-child { color: green; }
      div p:last-child { color: blue; }  
    </style>
  </head>

  <body>
  
    <div>
      <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p>
	  
	  <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета,
	  поскольку никаких правил для него не задано. </p>
	  
	  <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем.
	  Цвет текста будет синим.</p>
    </div>
	
  </body>
</html>

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

Подчёркнутый текст (свойство text-decoration) | CSS примеры

Отменить подчёркивание у ссылки

<style>
.raz {
  text-decoration: none;
  border: none; 
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).

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

<style>
.raz:not(:hover) {
  text-decoration: none;
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

Пунктирное подчёркивание

<style>
.raz {
  text-decoration: underline; 
  text-decoration-style: dashed; 
  cursor: pointer; 
}
</style>

<span>Стиль текста CSS</span>

Сделать линию над и под текстом

<style>
.raz {
  text-decoration-line: underline overline;
}
</style>

<span>Стиль текста CSS</span>

currentcolor

цвет черты что у текста

transparent

черта полностью прозрачная (невидимая)

red

цвет черты ключевым словом

#ff0000 или #ff0000ff

цвет черты в формате HEX

rgb(255,0,0) или rgba(255,0,0,1)

цвет черты в формате RGB или RGBA

hsl(0,100%,50%) или hsla(0,100%,50%,1)

цвет черты в формате HSL() или HSLA()

initial

currentcolor

inherit

наследует значение родителя

unset

currentcolor

Свойство text-decoration-color не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}
</style>

<div>Свойство <code>text-decoration-color</code> не наследуется, применяется ко всем элементам</div>

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset и text-decoration-width не реализованы вовсе и потому пока не рассмотрены в статье.

Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome

<style>
.raz {
  text-decoration: underline;
  text-decoration-skip: ink;
}
</style>

<span>Пример подчёркнутого текста</span>

Подчёркивание без пропусков выносных частей символов в Safari

<style>
.raz {
  text-decoration: underline;
  -webkit-text-decoration-skip: none;
}
</style>

<span>Пример подчёркнутого текста</span>

Разница

<table>
  <tr>
    <tdvydelit">text-decoration: underline;">Нижнее подчёркивание, сделанное <code>text-decoration: underline;</code>
    <td><spanvydelit">border-bottom: 1px solid;">Нижнее подчёркивание, сделанное <code>border-bottom: 1px solid;</code></span>
</table>

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line, text-decoration-style и text-decoration-color.

10 фрагментов CSS для создания потрясающих эффектов анимированного подчеркивания текста

Подчеркивание CSS по умолчанию отлично работает. Кто мог это ненавидеть?

Но всегда есть что улучшить. Вы можете подумать, что с подчеркиванием мало что можно сделать, но если вы углубитесь в CSS-анимацию, вы поймете, насколько много вы действительно можете!

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

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многого другого!

1.

Если вы переместите курсор между этими ссылками, вы заметите что-то забавное. Эффект подчеркивания в навигационном меню фактически изменяет стили между ссылками.

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

Вы можете сделать все это самостоятельно с помощью небольшого количества CSS, добавив подчеркнутый блок в элемент HTML.Удивительно просто, учитывая, сколько кода вам нужно (около 60 строк CSS).

2. Распределение нескольких строк

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

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

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

3. Подчеркивание

Райан Морс (Ryan Morse) создал этот очень простой эффект скользящего подчеркивания, основанный исключительно на CSS. Это довольно элегантное решение, учитывая, что для него даже не требуется дополнительный элемент HTML.

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

4. Лучшее подчеркивание текста

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

В улучшенном подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки.

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

5. Анимационные стили

Это уникальное перо обладает несколькими настраиваемыми эффектами подчеркивания, созданными с помощью чистого CSS разработчиком Мэтью Скоттом.

Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых распространенных переходах CSS:

• Справа налево
• слева направо
• Анимация вовне
• Анимация внутрь

Вы заметите, что это работает с обычными переходами CSS3, которые работают как при наведении курсора на ссылку, так и при перемещении курсора за пределы ссылки.

Определенно несколько классных эффектов, и все они довольно легко переносятся в свои собственные проекты.

6.

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

Они идут немного более экстремально с помощью стилей подчеркивания, подталкивающих тени CSS3 для эффектов свечения. Вы, вероятно, можете использовать это в качестве шаблона для создания классного дизайна светового меча из Звездных войн, если у вас есть время (или вы просто любите Звездные войны).

7. Просто захожу

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

С этой анимацией у вас все еще остается ощущение, что каждая подчеркивающая «граница» соединяется с каждой ссылкой. Мне он нравится больше, чем линии, которые скользят между ссылками, потому что этот эффект кажется более быстрым и прямым.

Если вам нужен настоящий минималистский подход к подчеркиванию эффектов, вам обязательно стоит попробовать поработать с этим кодом.

8. Расширение анимации

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

Обратите внимание, что здесь используется функция cubic-bezier () для создания уникальной анимации при наведении курсора.

Это выполняется немного быстрее, чем стандартный «линейный» переход, поэтому дает совсем другой эффект. И вы даже можете попробовать самостоятельно настроить анимацию Безье, чтобы создать уникальный стиль подчеркивания.

9. Пользовательские подчеркивания CSS

Вот еще один стиль, который действительно может работать на любом веб-сайте.Разработчик Тристан Уилсон создал эти простые подчеркивания, которые обрамляют линию на несколько пикселей ниже текста.

Это достаточно незаметно, чтобы заметить, но, конечно, не повлияет на удобство использования. Этот эффект действительно о эстетике, больше, чем о дополнительном удобстве использования.

Если вы хотите, чтобы ваши подчеркивания действительно выделялись среди всего стада, этот набор — отличное место для начала.

10. Установка между спусковыми механизмами

Ранее я упоминал о настройке стилей подчеркивания, чтобы они соответствовали убранным шрифтам.Эта ручка Джонатана Нила именно это и делает, и в ней не используются ничего, кроме HTML5 и CSS3.

Весь эффект зависит от пары свойств CSS3: box-shadow и text-shadow , если быть точным.

Это создает иллюзию того, что сбоку от спусковых элементов есть пространство, и придает подчеркиванию более стильный вид.

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

11. Пользовательские градиенты

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

Градиент проходит через CSS3, поэтому вы можете изменить цвета на все, что захотите. И если вы можете в это поверить, эта штука не требует для работы никакого дополнительного HTML . Просто выберите нужные ссылки привязки и скопируйте / вставьте коды CSS, чтобы получить собственные градиентные подчеркивания.

Я, конечно, надеюсь, что из всех этих дизайнов есть один приятный эффект, который вы можете извлечь из этой коллекции.

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

Основы CSS: стилизация ссылок как у босса

Интернет основан на ссылках. Идея о том, что мы можем щелкать / касаться ссылки и переходить с одной веб-страницы на другую, заключается в том, что серфинг в Интернете стал нарицательным.

Ссылки в HTML даже выглядят иначе, чем обычный текст без каких-либо стилей CSS.

Они синие (пурпурные при посещении). Они подчеркнуты. Это ссылка в чистом виде.

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

Хотите использовать другой шрифт, изменить цвет, убрать подчеркивание и сделать все прописными? Конечно, а почему бы и нет?

  a {
  красный цвет;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
}  

Теперь готовим на газе! Но зачем останавливаться на достигнутом? Давайте рассмотрим еще несколько способов стилизации ссылок, чтобы сделать их удобнее.

Стиль каждого состояния ссылки

Ссылки имеют разные состояния, то есть они адаптируются, когда мы взаимодействуем с ними на веб-странице. Есть три дополнительных состояния ссылки, которые стоит учитывать каждый раз, когда мы меняем стиль ссылок по умолчанию:

• Ссылка (: ссылка ): это, вероятно, наименее используемая, но она предназначена для стилизации элементов , имеющих href , а не ссылок-заполнителей.
• Посещено (: посещено ): внешний вид ссылки, по которой пользователь щелкнул на странице раньше, когда курсор мыши не находится над ней.Стили, которые вы можете применить к : посещенный , ограничены по соображениям безопасности.
• Наведение (: наведение ): когда курсор мыши находится поверх ссылки без щелчка
• Активный (: активный ): когда ссылка находится в процессе нажатия. Это может быть очень быстро, но это когда кнопка мыши была нажата и до того, как щелчок закончился.
• Focus (: focus ): Как : наведите курсор на , но где ссылка выбирается с помощью клавиши Tab на клавиатуре.Состояния наведения и фокусировки часто стилизованы вместе.

Обратите внимание на порядок там важен:

1. Link
2. Visited
3. Hover
4. Active
5. Focus

Если вы не сделаете это в этом порядке (представьте, что ваш стиль : visit идет после вашего стиля : hover ), ссылки не будет вести себя так, как вы хотите. В моем воображаемом примере стиль : visit переопределит стиль : hover , что маловероятно, что это то, что вам нужно.Фокус — это функция доступности, поэтому последняя, ​​потому что она наиболее важна.

Один из способов запомнить порядок — это ЛЮБОВЬ и НЕНАВИСТЬ . то есть L (ink) OV (isted) E / H (over) A (Active) TE.

Вот та же ссылка, на которую мы смотрели. Сначала попробуйте навести указатель мыши на него, не нажимая, и обратите внимание, что он становится подчеркнутым. Затем щелкните ссылку, но оставьте кнопку мыши нажатой на некоторое время, чтобы увидеть, как активный стиль меняет цвет ссылки на черный.Наконец, отпустите кнопку мыши, и ссылка должна стать фиолетовой, прежде чем она будет технически посещена.

Ссылки кажутся простой концепцией, но, черт возьми, в них много чего, а CSS дает нам невероятные возможности для настройки взаимодействия!

Ссылки как кнопки

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

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

  a {
  цвет фона: красный;
  цвет белый;
  отступ: 1em 1.5em;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
}  

Отлично! Теперь давайте воспользуемся способностями изменения состояния, которые мы узнали в предыдущем разделе, чтобы сделать нашу искусственную кнопку более интерактивной. Мы сделаем кнопку темно-серой при наведении, черной при активной и светло-серой при посещении:

  a {
  цвет фона: красный;
  цвет белый;
  отступ: 1em 1.5em;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
}

a: hover {
  цвет фона: # 555;
}

a: active {
  цвет фона: черный;
}

а: посетил {
  цвет фона: #ccc;
}  

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

Ой, и курсоры!

Мы довольно подробно рассмотрели ссылки на стили, но есть еще один их компонент, который мы не можем игнорировать: курсор.

Курсор указывает положение мыши на экране. Мы уже привыкли к стандартной черной стрелке:

  a: hover {
  курсор: указатель;
}  

 
 a {
 
 background-image: linear-gradient (# 000000, # 000000), linear-gradient (#ffffff, #ffffff); 
 
} 
 

 
 a {
 
 цвет: # dfe5f3; 
 
 текстовое оформление: нет; 
 
 фоновое изображение: линейный градиент (RGB (176, 251, 188), RGB (176, 251, 188)), 
 
 linear-gradient (# feb2b2, # feb2b2); 
 
 размер фона: 100% 2 пикселя, 100% 2 пикселя; 
 
 фоновая позиция: 100% 100%, 0100%; 
 
 фоновый повтор: без повтора, без повтора; 
 
} 
 

 
 a {
 
 цвет: # dfe5f3; 
 
 текстовое оформление: нет; 
 
 фоновое изображение: линейный градиент (RGB (176, 251, 188), RGB (176, 251, 188)), 
 
 linear-gradient (# feb2b2, # feb2b2); 
 
 размер фона: 100% 2 пикселя, 0 2 пикселя; 
 
 фоновая позиция: 100% 100%, 0100%; 
 
 фон-повтор: без повтора; 
 
 переход: размер фона 2с, линейный; 
 
} 
 
 a: hover {
 
 background-size: 0 2px, 100% 2px; 
 
} 
 

 
 a {
 
 цвет: # dfe5f3; 
 
 текстовое оформление: нет; 
 
 фоновое изображение: линейный градиент (# 222b40, # 222b40), линейный градиент (
 
 RGB (176, 251, 188), 
 
 RGB (176, 251, 188) 
 
), линейный градиент ( # feb2b2, # feb2b2); 
 
 размер фона: 20 пикселей 2 пикселя, 100% 2 пикселя, 0 2 пикселя; 
 
 background-position: calc (20px * -1) 100%, 100% 100%, 0100%; 
 
 фон-повтор: без повтора; 
 
 transition: background-size 2s linear, background-position 2s linear; 
 
} 
 
 a: hover {
 
 background-size: 20px 2px, 0 2px, 100% 2px; 
 
 background-position: calc (100% + 20px) 100%, 100% 100%, 0100%; 
 
} 
 

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

 
 
 
 
 
   Это ссылка   внутри абзаца. 
 

  

Вот результат:

Источник изображения

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

Этот процесс удаления немного отличается, если вы используете Bootstrap CSS в своем веб-проекте. Давайте кратко обсудим процесс для сайтов Bootstrap.

По умолчанию в Bootstrap ссылки показывают подчеркивание, только когда они находятся в наведенном или активном состоянии.Это означает, что когда посетитель наводит курсор на ссылку или нажимает на нее, он будет отображать подчеркивание. В противном случае подчеркивание не будет отображаться в ссылках, даже если они были посещены. Кроме того, ссылки, определенные классом кнопки Bootstrap, никогда не имеют подчеркивания.

Источник изображения

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

Вот код CSS:

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

Вот HTML:

 
 
 
 
 
   Это ссылка  , которая отображается внутри абзаца. Ниже приведена ссылка, определенная классом кнопки Bootstrap. 
 

 
  Ссылка  
 
 
  

Вот результат:

Источник изображения

Стилизация ссылок с помощью CSS

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

Как удалить подчеркивание для тега привязки с помощью CSS?

Как удалить подчеркивание для тега привязки с помощью CSS?

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

Синтаксис:

 текст-украшение: нет; 

Пример 1: В этом примере для свойства text-decoration устанавливается значение none.

Выход:

Пример 2: Используйте свойство hover для удаления подчеркивания при наведении мыши на часть привязки.

Вывод:
До перемещения мыши:

После перемещения мыши:

5 способов сделать скользящие подчеркнутые ссылки

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

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

Восстановление подчеркивания

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

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

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 текстовое оформление: нет; 
 
} 
  

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

Таким образом, единственным другим вариантом создания многострочного подчеркивания является использование свойства background . Поскольку вы не можете изменить размер или расположение background-color , нам нужно использовать background-image . Я повторяю тот же цвет в градиенте, поскольку пытаюсь сделать фон сплошным цветом, но вы определенно можете оживить вещи, сделав его настоящим градиентом.

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 текстовое оформление: нет; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a); 
 
} 
  

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

Мы установим ширину background-size на 100% и высоту на 0,1em - здесь мы используем em, так как это пропорционально масштабирует подчеркивание при изменении размера текста.

Установите background-position-y на 100% , чтобы поместить подчеркивание в нижнюю часть привязки, чтобы оно выглядело как подчеркивание.

Мы также добавим туда переход, чтобы потом можно было анимировать подчеркивание.

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 текстовое оформление: нет; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a); 
 
 размер фона: 100% 0.1em; 
 
 background-position-x: 0%; 
 
 background-position-y: 100%; 
 
 фон-повтор: без повтора; 
 
: переход: размер фона 0,2 сек. 
 
} 
  

1. Сдвигайте внутрь и назад

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

Первоначально мы установили background-size width на 0% , чтобы скрыть его.При наведении мы меняем его на 100% , чтобы он скользил слева направо.

Если вы хотите изменить направление, измените background-position-x на 100% , чтобы изменить начальную позицию вправо.

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 текстовое оформление: нет; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a); 
 
 размер фона: 0% 0.1em; 
 
 background-position-y: 100%; 
 
 background-position-x: 0%; 
 
 фон-повтор: без повтора; 
 
 переход: размер фона 0.2с легкость входа-выхода; 
 
} 
 
 a: hover, 
 
 a: focus, 
 
 a: active {
 
 background-size: 100% 0.1em; 
 
} 
  

2. Выдвиньте середину наружу

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

Единственное различие между этим и предыдущим состоит в том, что мы меняем background-position-x на 50% , чтобы сделать начальную точку подчеркивания посередине.

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 текстовое оформление: нет; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a); 
 
 размер фона: 0% 0.1em; 
 
 background-position-y: 100%; 
 
 background-position-x: 50%; 
 
 фон-повтор: без повтора; 
 
: переход: размер фона 0,2 сек. 
 
} 
 
 a: hover, 
 
 a: focus, 
 
 a: active {
 
 background-size: 100% 0.1em; 
 
} 
  

3. Вставьте и выдвиньте

Наведение на ссылку с этим эффектом выглядит точно так же, как и первый эффект. Однако при наведении курсора подчеркивание сместится вправо, а не влево.

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

По сути, мы используем тот же трюк с CSS, но здесь мы воспользуемся преимуществом того, что подчеркивание изначально не видно.Мы устанавливаем background-position-x: 100% с нашими начальными стилями, чтобы он скользил вправо при наведении курсора, и меняем его на 0% при наведении курсора, чтобы линия заходила слева.

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 текстовое оформление: нет; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a); 
 
 размер фона: 0% 0.1em; 
 
 background-position-y: 100%; 
 
 background-position-x: 100%; 
 
 фон-повтор: без повтора; 
 
 переход: размер фона 0.2с легкость входа-выхода; 
 
} 
 
 a: hover, 
 
 a: focus, 
 
 a: active {
 
 background-size: 100% 0.1em; 
 
 background-position-x: 0%; 
 
} 
  

4. Сдвинуть к середине

С этим эффектом у нас есть 2 линии, которые мы начинаем с внешних краев и сдвигаем их внутрь, пока они не встретятся посередине. При наведении они скользят к краям и исчезают.

Так как у нас есть 2 разные линии, нам нужно создать 2 linear-gradient.Каждый раз, когда вы хотите добавить еще одно свойство фона, вы должны добавить запятую после каждого значения элемента. Однако, если значение одинаково для обоих, CSS просто повторит его. Это означает, что нам не нужно вручную дублировать каждое свойство фона, если оно будет одинаковым для каждого linear-gradient.

Поскольку все остальное для линий такое же, нам просто нужно отрегулировать их положение. Мы устанавливаем для первой строки background-position-x значение 0% , чтобы начать ее с левого края, а вторую - 100% , чтобы начать ее с правого края.

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a), linear-gradient (# d99a5a, # d99a5a); 
 
 размер фона: 0% 0.1em; 
 
 background-position-y: 100%; 
 
 background-position-x: 0%, 100%; 
 
 фон-повтор: без повтора; 
 
: переход: размер фона 0,2 сек. 
 
 текстовое оформление: нет; 
 
} 
 
 a: hover, 
 
 a: focus, 
 
 a: active {
 
 background-size: 100% 0.1em; 
 
} 
  

Всегда видимые варианты подчеркивания

Если вы хотите, чтобы подчеркивание всегда присутствовало, вы все равно можете использовать первые четыре эффекта. Единственная разница в том, что нам нужно добавить дополнительное подчеркивание, используя тот же эффект linear-gradient . Обратите внимание, что для эффекта «слайд-центр» нам нужно добавить 3-й линейный градиент , поскольку в этом эффекте уже используются 2 из них.

  Копия 
 a {
 
 цвет: седло-коричневый; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a), linear-gradient (седло-коричневый, седло-коричневый); 
 
 размер фона: 0% 0.1em, 100% 0,1em; 
 
 background-position-y: 100%; 
 
 фон-повтор: без повтора; 
 
: переход: размер фона 0,2 сек. 
 
 текстовое оформление: нет; 
 
} 
 
 .slide-in-back {
 
 background-position-x: 0%; 
 
} 
 
 .slide-in-back: hover, 
 
 .slide-in-back: focus, 
 
 .slide-in-back: active {
 
 background-size: 100% 0.1em, 100% 0.1 Эм; 
 
} 
 
 .slide-in-out {
 
 background-position-x: 100%; 
 
} 
 
. выдвижение: наведение, 
 
. выдвижение-выход: фокус, 
 
. выдвижение-выход: активный {
 
 размер фона: 100% 0,1 мкм, 100% 0,1 мкм; 
 
 background-position-x: 0%; 
 
} 
 
 .slide-middle-out {
 
 background-position-x: 50%; 
 
} 
 
 .slide-middle-out: hover, 
 
 .slide-middle-out: focus, 
 
 .slide-middle-out: active {
 
 background-size: 100% 0.1em, 100% 0.1 Эм; 
 
} 
 
 .slide-to-middle {
 
 background-image: linear-gradient (# d99a5a, # d99a5a), linear-gradient (
 
 # d99a5a, 
 
 # d99a5a 
 
), linear-gradient ( седло-коричневый, седло-коричневый); 
 
 размер фона: 0% 0.1em, 0% 0,1em, 100% 0,1em; 
 
 background-position-x: 0%, 100%; 
 
} 
 
 .slide-to-middle: hover, 
 
 .slide-to-middle: focus, 
 
 .slide-to-middle: active {
 
 background-size: 100% 0.1em, 100% 0.1 em, 100% 0,1em; 
 
} 
  

5. Сдвинуть вверх

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

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

Поскольку мы хотим, чтобы подчеркивание было всегда видимым, обратите внимание, что мы изменили ширину по умолчанию для background-size на 100% . Чтобы переместить подчеркивание в верхнюю часть ссылки, мы меняем высоту background-size на 100% .

  Копия 
 a {
 
 цвет: черный; 
 
 background-image: linear-gradient (# d99a5a, # d99a5a); 
 
 размер фона: 100% 0,1em; 
 
 background-position-y: 100%; 
 
 фон-повтор: без повтора; 
 
 переход: размер фона 0.2с легкость входа-выхода; 
 
} 
 
 a: hover, 
 
 a: focus, 
 
 a: active {
 
 background-size: 100% 100%; 
 
} 
  

Бонус!

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

@ jh4yy создал CodePen, где он анимирует подчеркивание поверх существующего подчеркивания.

Узнайте, как создать этот эффект, в руководстве Jhey’s Egghead.

Есть еще?

Есть классный эффект подчеркивания ссылки? Я бы с удовольствием это увидел!

Отправьте его мне @NerdCowboy или через мою контактную страницу!

CSS Анимированное подчеркивание при наведении курсора на ссылки

Создайте анимированное подчеркивание CSS при наведении курсора для более уникального подчеркивания при наведении курсора, чем скучные браузеры по умолчанию, использующие только CSS.
Этот фрагмент был на моем CodePen довольно долгое время и привлек некоторое внимание, поэтому я подумал, что положил сюда.Это довольно простой, но эффективный визуальный эффект для основной навигации. Размер и пустое пространство можно легко изменить с помощью отступов / полей.

Код для анимированного подчеркивания при наведении курсора

Код должен быть прямым и довольно коротким.

HTML

  

  
  О программе  
  
  Портфолио  
  
  Блог  
  
  Связаться  
  

CSS

  ul {
  маржа: 150 пикселей авто 0;
  отступ: 0;
  стиль списка: нет;
  дисплей: таблица;
  ширина: 600 пикселей;
  выравнивание текста: центр;
}
li {
  дисплей: таблица-ячейка;
  положение: относительное;
  отступ: 15 пикселей 0;
}
a {
  цвет: #fff;
  текст-преобразование: прописные буквы;
  текстовое оформление: нет;
  межбуквенный интервал: 0.15em;
  дисплей: встроенный блок;
  отступ: 15 пикселей 20 пикселей;
  положение: относительное;
}
a: after {
  фон: нет повторения прокрутки 0 0 прозрачный;
  внизу: 0;
  содержание: "";
  дисплей: блок;
  высота: 2 пикселя;
  осталось: 50%;
  позиция: абсолютная;
  фон: #fff;
  переход: ширина 0,3 с ослабляет 0 с, слева 0,3 с ослабляет 0;
  ширина: 0;
}
a: hover: after {
  ширина: 100%;
  слева: 0;
}
  

Предварительный просмотр

См.