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

[![enter image description here](https://i.stack.imgur.com/scuJ5.png)](https://i.stack.imgur.com/scuJ5.png)

So far I've done the following:

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

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

But this isn't responsive. 

See the [Codepen](https://codepen.io/A7DC/pen/MWYmGOo).

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