JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="filter-list">
					<li>
						<a href="{{ route('question.index') }}">
							<span>All</span>
							<span style="background: #5fbeaa" class="filter-pill"></span>
						</a>
					</li>
          <li>
						<a href="{{ route('question.index') }}">
							<span>a big filter name here</span>
							<span style="background: #5fbeaa" class="filter-pill"></span>
						</a>
					</li>
       </ul>

CSS

body{
  background: #fff;
}

ul#filter-list{
	list-style: none;
	padding-left: 0px;
}

ul#filter-list span{
	font-size: 14px;
	float: l
	margin: 0px 5px;
}

ul#filter-list span:hover + span.filter-pill{
	opacity: 1;
	-webkit-transition-timing-function: ease;

}

span.filter-pill{
	border-radius: 4px;
	width: 100%;
    margin-left: 12px;
    height: 10px;
    opacity: 1;
    -webkit-transition-timing-function: ease;
    display:inline-block;
}