带有中等边框底部的标题 - 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 提出关于使用代码 sn-p 更好地展示结果的建议。

更改 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>