List bullets: is it possible to use (1) an attribute for the content while (2) preserving text alignment?
Goal:
custom bullet text from attr : aligned list text
longer custom bullet text from attr : aligned list text
Attempt:
HTML:
<ul>
<li data-bullet="custom bullet text from attr : "> aligned list text</li>
<li data-bullet="longer custom bullet text from attr : "> aligned list text</li>
</ul>
CSS:
list-style-type: attr(data-label);
I can do (1) or (2), but not both:
I can get custom text without alignment
li::before {
content: attr(data-bullet);
margin-right: 5px;
}
li {
list-style-type: none;
}
<ul>
<li data-bullet="glorp"> text to align</li>
<li data-bullet="glorpulous">text to align</li>
</ul>
Or aligned text, but only with a static list of predefined bullets
ol {
list-style-type: upper-roman;
}
<ol>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
</ol>
So, is there any way to have the bullet text come dynamically from an attribute in each individual <li> element, while keep the <li> text aligned?