Как сделать красную линию короче?

Question

[Lorem Ipsum]

Причём нужно делать в контексте table. Иначе никак.

Comments

[Ankhena]

Границу делаете прозрачной, красную линию - псевдоэлементом

[Lorem Ipsum]

Ankhena, а каким псевдоэлементом?

[Ankhena]

Lorem Ipsum, before или after без разницы

Answer 1

[Andrey Vasilev]

Answer 2

[mletov]

Обрамите слово "Заголовок" в div и уже ему задавайте border-color
А ширину для div укажите, скажем 80%

Comments

[Ankhena]

Лишние обертки - зло

Answer 3

[syntaxorange]

Лучше используйте псевдоэлемент `::after` на селекторе `.header`

.header {
    position: relative;
    border-bottom: 4px solid transparent;
}

.header::after {
    position: absolute;
    z-index: 1;
    left: 2.5%;
    bottom: -4px;
    width: 95%;
    height: 4px;
    content: '';
    background-color: #f00;
}

Comments

[Andrey Vasilev]

чтобы центрировать нужно прописать:

left: 50%;
transform: translateX(-50%);

[syntaxorange]

Andrey Vasilev, Чтобы центрировать, можно по-разному прописать. В том числе использовать свойство `transform` CSS3 модуля. До его появления для центрирования использовали отрицательные маржины. А грамотный синтаксис псевдоэлементов начинается с двойного двоеточия, чтобы различать псевдоэлементы от псевдоклассов. Ваша запись `:before` в стиле CSS2 модуля плохо коррелирует с `transform`. И в целом отсортируйте код, если не по выборочному принципу `csscomb`, то хотя-бы по алфавитному порядку.

[Andrey Vasilev]

syntaxorange, я описал на скоруй руку работающий код, просто если что-то неустраивает, то автор поправит. в целом со всем согласен.