testing h2 underline

by agustinmorelle

HTML

<h2 class="entry-title">
<a class="aTag">
The revolution starts with you
</a>
<div class="line">
</div>
</h2>
<br>
<h2 class="entry-title">
<a class="aTag">
Xonomoto Software has been acquired by Unikue
</a>
<div class="line">
</div>
</h2>
<br>
<h2 class="entry-title">
<a class="aTag">
test small
</a>
<div class="line">
</div>
</h2>

CSS

h2 {
  font-size: 24px;
  line-height: 1.25;
  display: inline-block;
  padding-bottom: 14px;
  position: relative;
}
.line{
    content: "";
    position: absolute;
    bottom: 0;
    height: 9px;
    background-color: #B841D5;
    border-radius: 4.5px;
    margin-left: 1px;
}
a{
  font-family:"Arial";
  font-size:25px;
  color:#999999;
}

JavaScript

var line = document.getElementsByClassName('line');
let h2 = document.getElementsByClassName('entry-title');
let aTag = document.getElementsByClassName('aTag');

let TotalWidth = 0;
let FinalWidth = 0;
let maxPixel = "85.2px";
let minPixel = "25.56px";



for(let i=0; i < aTag.length; i++){
TotalWidth = aTag[i].offsetWidth * 0.76;
if(TotalWidth>150){
line[i].style.width = maxPixel;
}
else if(TotalWidth<150){
line[i].style.width = minPixel;
}




}