How to create a responsive bottom border for titles in CSS?

Question

I'm looking to replicate the following design in CSS:

So far I've done the following:

.bb-title::before{
  content:'';
  position: absolute;
  background-color: #7D18FD;
  width: 25%;
  height: 3px;
  bottom: 0;
}

<h2 class='f2 mt4 bb-title relative'>
  What people are saying
</h2>

But this isn't responsive.

See the Codepen.

What is the best way to achieve a bottom border on titles, where the border will always be the same width as the title?

Answer 1

Try adding this and remove the old styling

.bb-titlee{
    position: relative;
    border-bottom: 3px solid #7D18FD;
    display: inline;
    padding: 0;
    margin: 0;
}

h2 elements are displayed as blocks as default, if we set it to inline it will wrap around the text and contain that width.