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

Question

[nicksemkin]

Хочу сделать h1, в котором нижнее подчеркивание выполнено как на скрине ниже. Не пойму как это сделать.

Answer 1

[iBird Rose]

через :after

h1 {position: relative;}
h1:after {
  content: '';
  display: inline-block;
  width: 100px;
  height: 2px;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: red;
}

Comments

[Сергей Ганин]

display: inline-block;*

[iBird Rose]

dohera: MaxKorz: ой все

[nicksemkin]

iBird Rose: сработало. Только есть одно. В макете фиксированное меню и эта полоска прокручивается поверх меню

[iBird Rose]

nicksemkin: где то relative не там задал. смотреть надо. можешь кинуть код на https://jsfiddle.net

[nicksemkin]

iBird Rose: https://jsfiddle.net/qcmn2vhL/

[iBird Rose]

nicksemkin: ну а где это нижнее подчеркивание?

[nicksemkin]

iBird Rose: тьфу. Вставил, но не видит почему то https://jsfiddle.net/qcmn2vhL/2/

[edk55]

nicksemkin: https://jsfiddle.net/qcmn2vhL/3/ Заголовку надо задать свойство position: relative; А самой черточке добавить position: absolute;

[nicksemkin]

edk55: https://jsfiddle.net/qcmn2vhL/6/ вот про что говорил, пролистайте немного

[Сергей delphinpro]

не нужно никаких абсолютов (особенно там, где можно обойтись)

h1:after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: red;
  margin: auto;
}

[edk55]

nicksemkin: Задайте тегу nav свойство z-index со значением, большим, чем у заголовка. Например, попробуйте z-index: 1; https://jsfiddle.net/qcmn2vhL/7/

[nicksemkin]

edk55: Все! получилось, Спасибо большое)

Answer 2

[spafix]

h1 {
background-image: url('../img/red_line.png');
background-repeat: no-repeat;
background-position: center 15px;
padding: 0 0 5px 0;
}
donat: https://money.yandex.ru/to/410013973761588/50