1

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?

2

I did some messing around and found this out:

ul{
  background:red;
}
li::before {
  content: attr(data-bullet);
  margin-right: 5px;
  background:green;
  display:block;
  float:left;
  width:100px;
  text-align:right;
}

li {
  list-style-type: none;
  background:blue;
  display:block;
  
}
<ul>
  <li data-bullet="glorp"> text to align</li>
  <li data-bullet="glorpulous">text to align</li>
</ul>

The styling is hideous and there is probably a better way to do it, but it seems to be working.

EDIT: And you have to predefine the width of the bullet part

1
  • 1
    Thanks. I should have mentioned that the fixed-width was a dealbreaker, but nice demo! May 6, 2020 at 16:14
1

You may use display:table and draw columns :

li::before {
  content: attr(data-bullet)'.';
  display: table-cell;
  text-align: right;
}

li {
  list-style-type: none;
}
ul {
  display: table;
  border-spacing: 5px 0;
}
li {
  display: table-row;
}
<ul>
  <li data-bullet="glorp"> text to align</li>
  <li data-bullet="glorpulous">text to align</li>
</ul>

Else you will need to set a fixed width to the ::before .

0

I don't have time at the moment to mock it up, but I will try some version of using a flexbox set of two cols per row and whitespace: nowrap; on the full-width version and then allow it to wrap for each row for less wide screens.

without testing, I think that should make the columns all the same width as the widest content (which can be variable) without specifying what the width is with an absolute value.

I guess it all depends on whether the li::marker can be considered its own item in the flexbox flow? I don't know if the browser can be tricked into that if it's not really part of the dom to be manipulated like other things?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.