JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<h1 class="title" length="l00">Hello World</h1>

<stock>
    <wood length="12" ></wood>
    <wood length="5" ></wood>
	<metal length="19"></metal>
	<wood length="4"></wood>
</stock>

CSS

.title {
  border-bottom: 3px solid #aaa;
  position: relative;
}
.title:after {
  content: "";
    width:100px;
    border-top: solid #662;
  border-top-width: attr(length em 50);
  border-bottom: 3px solid red;
  display: block;
  position: absolute;
}

stock::before {
	display: block;
	content: "To scale, the lengths of materials in stock are:";
}
stock > wood {
	display: block;
	height: attr(length em); /* default 0 */
	width: 1em;
	border: solid thin;
	margin: 0.5em;
}

JavaScript

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

$('.title').each(function(){
  // Change :after's width based on the text's width
  // .css('width', $(this).textWidth());
  this.setAttribute("length", "250");
});