JSFiddle - React, Tailwind, and code Playground

HTML

<li>hidden parent text</li>    
<li class="inline-block;">hidden parent text</li>

CSS

li {
display:block;
position:relative;
white-space: nowrap;
overflow: hidden;
border:1px solid red; 
}
li:after {
content: "visible pseudo-element";
position:absolute;
right:0;
}


li.inline-block {
display:inline-block;
}
li.inline-block:after {
display:block
}