Heading with medium border bottom – Bootstrap

Is possible using Bootstrap, add a border bottom with 3rem of width (for example) with a class, and add the parameter of color in the tag? Example:

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

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

OK. But I want something like this:

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

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

Is this possible? Thank you.

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

Answer

Thank you focus.style for your suggestion regarding using codes snippet to better demonstrate the result.

Change the background-color and instead use border for your underline, then you’ll be able to use Bootstrap classes to change the underline colour.

.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>