Заголовок со средней каймой внизу - Bootstrap

Question

Можно ли использовать Bootstrap, добавить нижнюю границу шириной 3rem (например) с классом и добавить параметр цвета в тег? Пример:

.half-title:after{
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: .75rem;
    background: Red;
}

<h1 class="half-title">THIS IS A TITLE</h1>

ОК. Но я хочу что-то вроде этого:

.half-title:after{
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: .75rem;
}

<h1 class="half-title bg-red">THIS IS A TITLE</h1>

Возможно ли такое? Спасибо.

https://jsfiddle.net/fekula/m3ydro1q/1/

Answer 1

Спасибо focus.style за ваше предложение относительно использования фрагмента кода для лучшей демонстрации результата.

Измените background-color и вместо этого используйте border для подчеркивания, тогда вы сможете использовать классы Bootstrap для изменения цвета подчеркивания.

.half-title:after{
    border: solid 4px transparent;
    border-color: inherit;
    content: '';
    display: block;
    height: 0;
    margin-top: .75rem;
    width: 3rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />

<h1 class="half-title border-default">THIS IS A TITLE</h1>

<h1 class="half-title border-info">THIS IS A TITLE</h1>

<h1 class="half-title border-warning">THIS IS A TITLE</h1>

<h1 class="half-title border-danger">THIS IS A TITLE</h1>