JSFiddle - React, Tailwind, and code Playground

HTML

<p>
LINE1<BR><BR>LINE2<BR>LINE3<BR>LINE4<BR>
_<BR>  i<BR>  <BR>  iii 
</p>

CSS

br:after {
    content: ' ';
    display: block;
}

br:before {
    line-height: 11px;
    height:11px;
    content: url(data:image/gif;base64,R0lGODlhCQALAJEAAISEhAAAAP///wAAACH5BAAAAAAALAAAAAAJAAsAAAIXjCUWibup2nlOHoaR3k87sEHK+IWeWQAAOw==);
}
br {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 1px dotted green;
    font-size: 8px;
    line-height: 11px;
    height:11px;
    background: yellow;  
    background-repeat: no-repeat;
    background-position: top left;
    background-origin: content-box;
    color: blue;
    content: "A";
    width: 11px;
    position: relative;
     top: 0px;
}