demavair
@demavair

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

Добрый вечер!
Подскажите, пожалуйста, как реализовать толщину подчеркивания ссылки и поместить линию под текст ссылки?
Пример:
b6078eefa744429c8769f9f5f2c9067f.png
  • Вопрос задан
  • 4391 просмотр
Решения вопроса 2
@marrs
1 -
a {
  display:inline-block;
  text-decoration:none;
  border-bottom: 4px solid blue;
  }

2 -
a {
  display:inline-block;
  text-decoration:none;
}
  a:after {
    display:block;
    content:'';
    width:100%;
    height:4px;
    background:blue;
    margin-top:-4px;
  }
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Можно сымитировать с помощью вложенных элементов:
https://jsfiddle.net/IonDen/gmyythqz/
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
стандартный underline. такое не умеет. делай через псевдоэлементы линию. и скрывай ее при ховере. желательно через opacity, чтобы ничего не прыгало
Ответ написан
Комментировать
walovari
@walovari
full stack web developer
Посмотрите в сторону border, в частности border-bottom
Ответ написан
@BLVST
Frontend. Открыт к предложениям.
HTML
<a href="#" class="link">
  <span class="link__text">Ссылка</span>
  <span class="link__border"></span>
</a>


CSS
.link {
  position: relative;
  display: inline-block;
}

.link__text {
  position: relative;
  z-index: 2;
}

.link__border {
  display: block;
  position: absolute;
  bottom: 4px;
  border-bottom: 4px solid #f00;
  z-index: 1;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы