Как добавить частичную границу в заголовок заголовка?

Мне нужно добавить стилизованную рамку в текст заголовка следующим образом:

но я не уверен, как это сделать.

Я попробовал код ниже с border-bottom, но он выглядит не очень хорошо.

h1 {
  font-size:30px;
  color:#000;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
}

<h1>Navigation</h1>

Ответы

Ответ 1

Вы можете использовать псевдоэлемент, расположенный над border-bottom:

h1 {
  font-size: 30px;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

h1::after {
  content: "";
  display: block;
  border-bottom: 1px solid orange;
  width: 25%;
  position: relative;
  bottom: -6px; /* your padding + border-width */
}

<h1>Navigation</h1>

Ответ 2

С псевдоэлементом и линейным градиентом

h1 {
  font-size: 30px;
  color: #000;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  bottom: 0;
  margin-bottom: -.5em;
  background: linear-gradient(to right, gold 15%, grey 15%, grey);
}

<h1>Navigation</h1>

Ответ 3

Вы можете использовать градиент и размер фона

h1 {
  font-size:30px;
  color:#000;
  background:linear-gradient(to right, gold 8em, #ccc 8em) bottom left no-repeat;/* here start/stop color is et at 8em, use your own value and colors */
  background-size:100% 3px;/* here set thickness */
  padding-bottom:5px;
}

<h1>Navigation</h1>

Ответ 4

Я взял его немного дальше и сделал заголовок более похожим на эталонное изображение. Я использую ту же концепцию фонового изображения, что и G-Cyr в ответ .
Обратите внимание на два фона. Первый набор значений в атрибутах background и background-size - вот что делает нижнюю строку; второй набор для цвета фона.

h1 {
  background: linear-gradient(to right, #E6831D 20%, #FFF 20%) bottom .5em left .8em no-repeat, linear-gradient(#323A45, #323A45);
  background-size: 100% 1px, 100% 100%;
  padding: .8em;
  color: #FDFFFE;
  font-size: 30px;
  font-family: sans-serif;
  font-weight: lighter;
}

<h1>Awesome Heading</h1>

Ответ 5

Один из способов сделать это - добавить h1::after с требуемой шириной - и иметь другой цвет границы.

h1 {
    font-size: 30px;
    color: #000;
    border-bottom: 1px solid #FFEB3B;
    padding-bottom: 5px;
    POSITION: relative;
}

h1:after {
    display: block;
    border-bottom: 1px solid red;
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 5em;
}

<h1>Navigation</h1>

Ответ 6

Попробуйте использовать псевдо-селектор :after

h1 {
  font-size:30px;
  color:#000;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
  position: relative;
}
h1:after {
  content:"";
  position: absolute;
  width: 100px;
  height: 1px;
  background: red;
  left: 0;
  bottom: -1px;
}

<h1>Navigation</h1>

Ответ 7

Один метод, который вы могли бы изучить, - это использовать pseudo-elements.

h1 {
  font-size: 30px;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  position: relative;
}

h1:after {
  content: "";
  width: 100px;
  height: 1px;
  background: orange;
  position: absolute;
  bottom: -1px;
  left: 0;
}

<h1>Navigation</h1>

Ответ 8

Вы должны использовать псевдоселектор :before, чтобы добавить эту границу, h1 - это block element, поэтому вам даже нужно добавить width для настройки длины этой границы, иначе она будет равна 100% h1 ширины,

h1{
  font-size:30px;
  color:#000;
  border-bottom: 1px solid #ccc;
  padding-bottom:5px;
  position:relative;
}
h1:before{
  content:"";
  bottom:-1px;
  left:0;
  border-bottom:1px solid brown;
  position:absolute;
  z-index:9;
  width:50%;
}

<h1>Navigation</h1>

Ответ 9

Для получения точного вывода используйте :after, а также :before псевдоэлементы. Установите их в absolute. Отметьте ниже фрагмент для справки.

h1 {
  font-size: 30px;
  color: #000;
  padding-bottom: 10px;
  position: relative;
  display: inline-block;
}

h1:before {
  content: "";
  width: 100%;
  height: 3px;
  background: #ccc;
  position: absolute;
  bottom: 0;
}

h1:after {
  content: "";
  width: 50%;
  height: 3px;
  background: red;
  display: block;
  position: absolute;
  bottom: 0;
}

<h1>Navigation</h1>