JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<ul>
	<li>
		Vehicula Cras Malesuada
		<i class="value" style="width: 75%"></i>
	</li>
	<li>
		Egestas Lorem Pellentesque Sem
		<i class="value" style="width: 90%"></i>
	</li>
	<li>
		Parturient Ligula Pellentesque Consectetur
		<i class="value" style="width: 65%"></i>
	</li>
</ul>

SCSS

body {
	padding: 10%;
}

ul {
	li {
		margin-top: 5px;
		padding: 10px 0;
		position: relative;
		z-index: 1;
		border-bottom: 2px solid #eee;	
	}
	
	.value {
		display: block;
		position: absolute;
		z-index: 1;
		left: 0;
		bottom: -2px;
		width: attr('data-width');

		content: '';

		border-top: 2px solid #aaa;
	}
}