SCSS

by Stefan Zamfira

HTML

<div>
  <span>Hover to change colorHovertochangeccolor</span>
</div>

<div>
  <span>Hover to changecolorHovertocha ngeccolor</span>
</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

* { box-sizing: border-box; }

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

div {
  background: #fff;
  width: 300px;
  padding: 2rem;
  margin-bottom: 1rem;
}

span {
    display: inline;
    position: relative;
}

span:after {
  position: absolute;
  left: 0;
  right: 0;
  width: var(--ww);
  height: 2px;
  background: red;
  content: "";
  bottom: 0;
}

JavaScript

const updateBorderWidth = () => {
	const $text = document.querySelectorAll('span');
  $text.forEach((el) => {
    el.style.setProperty('--ww', `${el.offsetWidth}px`);
  })
};


updateBorderWidth()