Подчеркните с другим цветом под текстом

Question

Я пытаюсь написать CSS, чтобы получить этот дизайн

Вот мой CSS:

.exp {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 30px;
    font-style: italic;
}
.exp:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0%;
    border-bottom: 1px solid #219b65;
}

HTML:

<h1 class="exp">Experience</h1>

А вот и JSFIDDLE Есть идеи, как это сделать? Я сделал это несколько лет назад, но не смог заставить его работать снова!

Answer 1

Ответ Бретта будет отлично работать, если вы знаете ширину вашего контейнера или хотите, чтобы подчеркивание охватывало только определенную ширину. Если вы хотите, чтобы подчеркивание заполняло доступное пространство, вам понадобятся два элемента - один для подчеркивания на всю ширину, а другой для выделенного подчеркивания.

Это также возможно при использовании одного элемента с использованием ::after вместо exp-title и установкой для свойства content значения «Опыт», но это не очень удобно для пользователя.

Обратите внимание, что я сделал подчеркивание значительно жирнее (5 пикселей), поэтому эффект более очевиден.

.exp {
  position: relative;
  font-style: italic;
  border-bottom: 5px solid #ccc;
}

.exp-title {
  display: inline-block;
  border-bottom: 5px solid #f00;
  font-weight: 300;
  padding-bottom: 15px;
  margin-bottom: -5px;
}

<h1 class="exp">
  <span class="exp-title">Experience</span>
</h1>

Answer 2

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

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

.some-container {
  position: relative;
  padding-bottom: 15px;
}
.exp {
  font-weight: 300;
  display: inline-block;
  margin-bottom: 0;
  font-style: italic;
}
.some-container::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0%;
  background-image: linear-gradient(to right, steelblue, steelblue 25%, lightgray 25%, lightgray);
}

<div class="some-container">
  <h1 class="exp">Experience</h1>
</div>

Answer 3

Вот полный ответ для вас. Отрегулируйте ширину в соответствии с вашими потребностями.

.FromTheFounder {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 15px;
    position: relative;
    margin-bottom: 30px;
    font-style: italic;
}
.FromTheFounder:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 13px;
    left: 0%;
    border-bottom: 1px solid #219b65;
    z-index: 1;
}

.FromTheFounder:after {
    content: "";
    position: absolute;
    width: 300%;
    height: 1px;
    bottom: 13px;
    left: 0%;
    border-bottom: 1px solid #ccc;
}

https://jsfiddle.net/vjhg7mna/