JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="TLINEZ">
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Eos, dolore?</a></li>
    <li><a href="#">Nostrum, saepe.</a></li>
    <li><a href="#">Soluta, veritatis?</a></li>
    <li><a href="#">Tempore, minus.</a></li>
    <li><a href="#">Qui, molestiae?</a></li>
    <li><a href="#">Quaerat, ratione.</a></li>
    <li><a href="#">Sapiente, quidem.</a></li>
    <li><a href="#">Quod, amet.</a></li>
    <li><a href="#">Soluta, at.</a></li>
</ul>

SCSS

.TLINEZ {
    list-style: none;
    padding-left: 0;
    font-size: 16px;
    line-height: 1.5;
    
    a {
        padding: .5em 1em 0;
        margin-bottom: .5em;
        display: inline-block;
        position: relative;
        text-decoration: none;
        
        &:hover,
        .active {
            box-shadow: 0 -2px 0 blue inset;
            
            &::before {
                content: 'SHOW ME';
                position: absolute;
                right: 1em;
            }
            
            &::after {
                content: '';
                right: 0;
                top: 0;
                bottom: 0;
                transform: translateY(1em) rotate(10deg);
                border-right: 2px solid blue;
                position: absolute;
            }
        }
    }
}

@for $i from 1 to 20 {
    .TLINEZ li:nth-child(#{$i}) a {
        width: calc(50% - #{$i * 7px});
    }
}