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

Question

[Boy]

Добрый вечер!
Подскажите, пожалуйста, как реализовать толщину подчеркивания ссылки и поместить линию под текст ссылки?
Пример:

Answer 1

[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;
  }

Comments

[Boy]

спасибо! не получилось(

[marrs]

Boy: Что не получилось? Цифорки подогнать проблема?
a {
font-size:30px;
display:inline-block;
text-decoration:none;
}
a:after {
display:block;
content:'';
width:100%;
height:7px;
background:#ddd;
margin-top:-11px;
}

[Boy]

marrs: это ссылка которую я хочу изменить:

product-overview__summary .product__meta .author {
font-family: "Roboto";
font-weight: 700;
color: #26245E;
float: left; }
media screen and (max-width: 480px) {
.product-overview__summary .product__meta .author {
float: none; } }

[Boy]

я не очень хорошо знаю css, из-за этого видимо допускаю ошибки.

[Boy]

получилось! Благодарю!! Оказывается неправильно вставлял.

Answer 2

[Денис Инешин]

Можно сымитировать с помощью вложенных элементов:
https://jsfiddle.net/IonDen/gmyythqz/

Comments

[Boy]

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

Исходный код ссылки которую я хочу декорировать (имя автора)

.product-overview__summary .product__meta .author {
font-family: "Roboto";
font-weight: 700;
color: #26245E;
float: left; }
media screen and (max-width: 480px) {
.product-overview__summary .product__meta .author {
float: none; } }

[Денис Инешин]

Boy: сделайте свое демо и посмотри что у вас не получается.

[Boy]

Денис Инешин: Благодарю! Всевозможными вариантами которые тут были опубликованы, я нашел решение

Answer 3

[iBird Rose]

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

Answer 4

[Сергей Казаков]

Посмотрите в сторону border, в частности border-bottom

Comments

[Boy]

пробовал. для border-bottom нельзя использовать в качестве заднего слоя.

[Сергей Казаков]

Boy: Все варианты ответов вам уже написали )

Answer 5

[Сергей Жубартович]

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;
}