Блог

Главная - Вопросы по программированию - Как мне выполнить это жирное смещение подчеркивания в CSS?

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

#css #underline

#css #подчеркивание

Вопрос:

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

введите описание изображения здесь

Комментарии:

1. Что вы пробовали до сих пор?

2. вы можете добавить div под словами и присвоить ему margin-top: -10 или какое-либо другое отрицательное значение вместо использования границы

3.На этом сайте это дочерний элемент an <h3> , и он имеет background-image: linear-gradient(to right, rgba(211,26,34,0.5) 0%, rgba(211,26,34,0.5) 100%); background-position: 0 0.84em; background-repeat: repeat-x; background-size: 1px 15px; примерно такое значение. Смотрите Очень полезные инструменты веб-разработчика Chrome — Просмотр и изменение CSS.

Ответ №1:

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

В коде концепция выглядит примерно так:

 .border-bottom {
  width: 100%;
  height: 10px;
  background-color: red;
  margin-top: -30px;
}  
 <div>
  <h2>
    bla bla bla
  </h2>
  <div class='border-bottom'>
  
  </div>
</div>

Ответ №2:

Вы можете добиться такого вида с помощью псевдоэлемента, поместив его в нижней части «родительского» элемента и установив для него 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