Подчеркнуть ссылку, удалить подчеркивание, border в качестве подчеркивания примеры !
Как добавить подчеркивание ссылки, как убрать подчеркивание ссылки, подчеркнуть ссылку через css? добавить подчеркивание с помощью css, изменить цвет подчеркивания ссылки! В общем все, что касается подчеркивания ссылок , как с подчеркиванием работать, стили по умолчанию и т.д.
Все о добавлении и удалении подчеркивания ссылки:
- Подчеркивание ссылки по умолчанию
- Удалить подчеркивание ссылки css
- При наведении на ссылку - убрать подчеркивание
- При наведении на ссылку - добавить подчеркивание
Бордюр в качестве подчеркивания ссылки- Как изменить цвет подчеркивания ссылки?
- Удалить бордюр под ссылкой при наведении
- Изменить цвет подчеркивания под ссылкой при наведении
- Пунктирное подчеркивание ссылки
Плавное подчеркивание ссылки при наведении слева направоПлавное подчеркивание ссылки при наведении от центра к краям- Как сделать разное подчёркивание ссылки одновременно со всех сторон?
Подчеркивание ссылки по умолчанию
Поскольку наша ссылка не имеет исходного состояния, нам придется вывести стили ссылки с подчеркиванием по умолчанию!
Сделал пример страницы с цветами ссылки , там же можно посмотреть и подчеркивание ссылки по умолчанию!
Нам нужен отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!
a.link_default {
color: -webkit-link;
transition: unset;
border: unset;
text-decoration: underline;
}
Здесь мы видим, что есть некое свойство text-decoration.
Которое имеет значение underline.
text-decoration : underline - декорирование текста, подчеркивание, под линией.
Пример ссылки с подчеркиванием по умолчанию!
Ну и плюс... вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква Следующим пунктом уберем подчеркивание у ссылки!
Убрать подчеркивание ссылки css
Как мы уже выше обращали ваше внимание на свойство text-decoration. Чтобы убрать подчеркивание снизу, надо изменить значение
a.example_1{
text-decoration: none;
}
И добавим такой этот класс нашей ссылке
Результат удаления подчеркивания у ссылки через css
Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса
a{
text-decoration: none;
}
При наведении на ссылку - убрать подчеркивание
Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!
Давайте это сделаем! Нам понадобится псевдо класс :hoverЧтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс
<a class="example_2_1">Пример удаления подчеркивания ссылки при наведении мышки</a>
Далее к классу с ссылкой добавляем :hoverПотому, что основные стиля влияют на свойства ссылки по умолчанию!
a.example_2_1{
text-decoration: underline;
}
a.example_2_1:hover{
text-decoration: none;
}
Результат удаления подчеркивания при наведении мышки:
Пример ссылки удаления подчеркивания при наведении мышки
При наведении на ссылку - добавить подчеркивание
Чтобы добавить подчеркивание ссылки, возьмем тот код, что убрали подчеркивание по умолчанию и добавим еще один стиль, но уже с
a.example_1_0{
text-decoration: none;
}
.example_1_0:hover{
text-decoration: underline;
}
<a class="example_1_0">Пример ссылки добавления подчеркивания при наведении мышки</a>
Результат добавления ссылки при наведении мышки:
Бордюр в качестве подчеркивания ссылки
Часто используют свойство border для подчеркивая ссылки! Зачем! Как я выше уже написал, то подчеркивание
a.example_1_1{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
Чтобы увеличить зазор между ссылкой и подчеркиванием используем padding-bottom: 1px;
<a class="example_1_1">Пример ссылки с подчеркиванием ссылки с помощью border-bottom</a>
Результат : бордюр в качестве подчеркивания ссылки
Пример ссылки с подчеркиванием ссылки с помощью border-bottom
Как изменить цвет подчеркивания ссылки?
Для того, чтобы изменить цвет подчеркивания, ссылки нам понадобится уничтожить подчеркивание по умолчанию text-decoration:
text-decoration: none;
Далее добавляем цветную линию под ссылкой:
border-bottom: 1px solid red;
Где:
border - бордюр,
bottom - внизу,
1px - толщина линии,
solid - линия сплошная,
red - цвет,
Соберем стили для цветного подчеркивания ссылки:
a.example_1_2{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
a.example_1_2:hover{
border-bottom: 1px solid blue;
}
<a class="example_1_2">Пример ссылки с цветным подчеркиванием ссылки </a>
Результат подчеркивание ссылки другого цвета:
Убрать бордюр под ссылкой при наведении
Зададим стили для ссылки:
Для того, чтобы убрать уже существующий бордюр используем text-decoration.
Добавляем бордюр - пусть будет красный...
Отступ бордюра снизу : "padding-bottom: 1px;".
Зададим hover:
Установим бордюр : "border: none;"
Соберем стили: Убрать бордюр под ссылкой при наведении.
a.example_2_0{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
a.example_2_0:hover{
border: none;
}
Соберем ссылку для эффекта : Убрать бордюр под ссылкой при наведении.
<a class="example_2_0">Пример Убрать бордюр под ссылкой при наведении</a>
Результат, как убрать подчеркивание свойства border:
Пример Убрать бордюр под ссылкой при наведении
Изменить цвет подчеркивания под ссылкой при наведении
Для того, чтобы "изменить цвет подчеркивания под ссылкой при наведении" вам понадобится:
Свойства стилей ссылки начальной возьмем из выше идущего пункта...
В "hover" добавим бордюр с другим цветом "black".
Если нужен произвольный цвет то : подобрать цвет.
Соберем код css изменения цвет подчеркивания под ссылкой при наведении
a.example_2{
text-decoration: none;
border-bottom: 1px solid red;
padding-bottom: 1px;
}
a.example_2:hover{
border-bottom: 1px solid black;
}
Опять же ссылка с внесенным классом в неё:
<a class="example_2">Пример Изменить цвет подчеркивания под ссылкой при наведении </a>
Результат изменения подчеркивания цвета при наведении.
Размещаем приведенный код прямо здесь:
Пример Изменить цвет подчеркивания под ссылкой при наведении
Пунктирное подчеркивание ссылки
Следующим пунктом рассмотрим пунктирное подчеркивание ссылки.
Возьмем выше приведенный пример и заменим solid.
На пунктирный : dashed.
Цвет подчеркивания задаем в свойстве "border", + bottom.
Если нужно подобрать цвет.
Соберем стили для : "пунктирное подчеркивание ссылки"
a.example_4{
text-decoration: none;
border-bottom: 1px dashed red;
padding-bottom: 1px;
}
Ссылка для : "пунктирное подчеркивание ссылки"
<a class="example_4">Пример пунктирное подчеркивание ссылки </a>
Результат : пунктирное подчеркивание ссылки
Пример пунктирное подчеркивание ссылки
Плавное подчеркивание ссылки при наведении css
Как сделать плавное подчеркивание ссылки!? Просто нужно написать соответствующие стили для плавного подчеркивание ссылки, либо же прямо здесь скопировать их!
Сделаем чтобы подчеркивание начиналось слева. При наведении, ссылка будет плавно подчеркиваться и подчеркивание будет начинаться слева. Пока курсор будет над ссылкой.
a.example_5 {
display: inline-block;
color:#ffeb3b;
line-height: 1;
text-decoration:none;
cursor: pointer;
border: none;
}
a.example_5:after {
background-color: #ffeb3b;
display: block;
content: "";
height: 2px;
width: 0%;
-webkit-transition: width .3s ease-in-out;
-moz--transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
}
a.example_5:hover:after,
a.example_5:focus:after {
width: 100%;
}
Плавное подчеркивание ссылки при наведении от центра к краям
Создадим подчеркивание плавное от центра к краям. Подчеркивание ссылки будет происходить плавно от центра к краям, пока над ссылкой находится курсор.
a.example_6 {
display: inline-block;
color:#ffeb3b;
line-height: 1;
text-decoration:none;
cursor: pointer;
position:relative;
border: none;
}
a.example_6:after {
background-color: #ffeb3b;
display: block;
content: "";
height: 2px;
width: 0%;
left:50%;
position:absolute;
-webkit-transition: width .3s ease-in-out;
-moz--transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
}
a.example_6:hover:after,
a.example_6:focus:after {
width: 100%;
}
Как сделать разное подчёркивание ссылки одновременно и сверху, и снизу, и слева, и справа?
Интересный поисковый запрос... человек хочет, чтобы подчеркивание ссылки было вообще везде вокруг ссылки, ну что же... давайте это сделаем:
a.example_99 {
text-decoration: none;
border-bottom: 1px solid red;
border-left: 1px solid green;
padding-left: 6px;
border-top: 1px solid #ffeb00;
padding-top: 6px;
border-right: 1px solid #ce00ff;
padding-right: 6px;
padding-bottom: 6px;
}
Пример ссылки с подчеркиванием вокруг:
Пример ссылки с подчеркиванием вокруг:Но если вам нужно, чтобы круговое подчеркивание ссылки появлялось, а не было стационарным, то возьмем предыдущий стиль и добавим ему hover
a.example_99_1{text-decoration: none; border:none;}
a.example_99_1:hover {
text-decoration: none;
border-bottom: 1px solid red;
border-left: 1px solid green;
padding-left: 6px;
border-top: 1px solid #ffeb00;
padding-top: 6px;
border-right: 1px solid #ce00ff;
padding-right: 6px;
padding-bottom: 6px;
}
Пример ссылки hover с подчеркиванием вокруг:
Пример ссылки с hover подчеркиванием вокруг:Вопрос на засыпку! Почему ссылка начала дергаться!? И сдвигаться вправо!?
Один из вариантов решения может быть : для ссылки сделать по умолчанию добавить в первую строку( где border:none;) padding-left: 7px;,
Этим вы очень поможете проекту! Заранее огромное спасибо!
