JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="a">
  <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
    <li class="blube">
  <span>aaaaaaaaaa</span>
	</li>
</ul>

CSS

.a{width: 150px; overflow-x: visible; overflow-y: visible; max-height: 100px; background: blue; display: block}

li{width: 150px; display: block; background: red; position: relative}
li span:after{
  position: absolute;
  height: 200px;
  width: 200px;
  right: -100%;
  background: green;
  content: ' ';
}