JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="entry-title">
<a>
This is a test
</a>

</h2>

CSS

h2 {
  font-size: 24px;
  line-height: 1.25;
  display: inline-block;
  padding-bottom: 8px;
  position: relative;
}
h2:before{
    content: "";
    position: absolute;
    width: 50%;
    bottom: 0;
    border-bottom: 6px solid #B841D5;
    border-radius:2px;
}

JavaScript

var h2 = document.getElementsByTagName('').getElementsByClassName("entry");

for(let i = 0; i < h2.length; i++){
if(h2[i].innerText.length >= 6){
h2[i].style.width = "25%";
}
else if(h2[i].innerText.length < 6){
h2[i].style.width = "10%";
}
}