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/
Advertisement
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>