JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><div id="a1" >
    <p href="#">Journalist</p>
    </div></li>
    <li><div id="a2" >
    <p href="#">Writer</p>
    </div></li>
    <li><p href="#">Publications designer</p></li>
</ul>

CSS

ul{
   list-style:none;
    -webkit-padding-start: 0px;

    }

#a1 p:hover::after {
    content:'123 ';
}

#a2 p:hover::after {
    content:'Here is ttitle' </br> ''- 1 </br> -2 ';
}