Minimum required to set an underline that can be animated

dabblet.css

/**
 * Minimum required to set an underline that can be animated
 */
.f-jons-demo1 h2 {
	display: inline; /* an inline element only takes up the size of its content (the content is "Hello World") */

	color: darkred;/* not needed - set the color of the text */
	background: linear-gradient(grey, grey) bottom / 100% .1em no-repeat;
}
/* The above can also be written like this: */
.f-jons-demo1 h2 {
	display: inline;

	color: darkred;/* not needed - set the color of the text */
	background-color: linear-gradient(grey, grey);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% 0.1em;
}
/* Minimum required to set an underline */
.f-jons-demo2 h2 {	
	color: darkred;/* not needed - set the color of the text */
	text-decoration: grey underline;/* no control over how thick the line is */
}

dabblet.html

<div class="f-jons-demo1">  <h2>Hello World</h2>  <p>   Text and text Text and text Text and text Text and text Text and text Text and text Text and text Text and text Text and text Text and text.    </p>  <p>  	Text and text Text and text Text and text Text and text.  </p></div>
<div class="f-jons-demo2">  <h2>Hello World</h2>  <p>   Text and text Text and text Text and text Text and text Text and text Text and text Text and text Text and text Text and text Text and text.    </p>  <p>  	Text and text Text and text Text and text Text and text.  </p></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}