I am attempting to create a ul menu with a :before pseudo-element on li tags. The text inside the :before's content varies for each row. I am aiming to align this text to the right for each li, like so:
pseudo_x li
pseudo_xx li
pseudo_xxx li
li:nth-child(n):before {
content: "===";
border: 1px dotted red;
}
li:nth-child(2n):before {
content: "-----------";
border: 1px dotted red;
}<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>*** Update
Thank you for your responses. However, I am unable to use list-style-type as I need to format the :before's content. Additionally, I cannot set one width for all contents. The reason I am detailing this is to utilize content for displaying the count of rows inside li tags, like this:
var rows = document.getElementsByTagName('li');
for(var i=0;i<rows.length;i++)
rows[i].setAttribute("c", "rows: "+"1".repeat(Math.random()*10|0))li{
list-style-type: none;
}
li:before{
color: white;
content: attr(c);
}
.red:before{background:red}
.orange:before{background:orange}
.blue:before{background:blue}
.green:before{background:green}<ul>
<li class="red">First</li>
<li class="orange">Second</li>
<li class="blue">Third</li>
<li class="green">Fourth</li>
</ul>