Определенная длина нижней границы

Question

У меня есть блок с текстом, для которого мне нужно использовать border-bottom, но подчеркнуть не всю нижнюю границу, а лишь пару центральных букв. (например в слове "выполнить" нужно чтобы граница была лишь под "олн".

Answer 1

При помощи псевдоэлемента можно сделать блок и задать ему позиционирование снизу по центру блока с текстом.

Так же, можно применить единицу измерения ch, которая равна одному узкому символу (n например)

.small-border {
  display: inline-block;
  position: relative;
}

.small-border::after {
  content: '';
  display: block;
  width: 3ch;
  height: .2em;
  background: red;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

<span class="small-border">выполнить</span>

БЛОГ НА HUSL

Определенная длина нижней границы

Ответы (1 шт):