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

Question

Я пытаюсь выполнить этот стиль подчеркивания, но все, что я пытаюсь, не работает.Вот ссылка на реальный сайт, на котором я нашел это.https://www.timeout.com/newyork/music/best-music-videos-of-all-time

Answer 1

Вы можете сделать это с помощью псевдоэлемента, поместив его в нижней части «родительского» элемента и установив для него z-index значение -1.

Смотрите здесь: https://codepen.io/anon/pen/JVNjLX

.link {
  position: relative;
  font-family: Roboto, sans-serif;
  font-weight: 900;
  font-size: 32px;
  text-decoration: none;
  color: #333;
  display: inline-block;
}

.link::before {
  content: "";
  width: 100%;
  height: 16px;
  background-color: pink;
  display: block;
  position: absolute;
  bottom: 2px;
  z-index: -1;
  
}

<a class="link" href="#0">
  Radiohead, Karma Police
</a>

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

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

Вы можете проверить это здесь: https://codepen.io/anon/pen/ZZKEwE

Answer 2

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

Концепция выглядит следующим образом:

.border-bottom {
  width: 100%;
  height: 10px;
  background-color: red;
  margin-top: -30px;
}

<div>
  <h2>
    bla bla bla
  </h2>
  <div class='border-bottom'>
  
  </div>
</div>