похоже так, только как все это формировать в динамике?
ведь заранее неизвестна CSS
.id1 {
overflow: auto; разрешили скроллБар
font-family:Georgia, 'Times New Roman', Times, serif;
font-size:10px;
font-style:italic;
font-weight:normal;
color:rgb(0,40,244);
border: 1px solid #BBB;
background: #EEF;
padding: 0px;
line-height: 1px;
margin-bottom: 0px;
margin-top: 0px;
text-indent:0px
}
<li id="phtml_2">
<span class="id1" >'AaБб'</span> <span class="id2 >Child node 11</span> </li>