How can I vertically align a list item marker

user_157949 0
Viewed 1464

I'm trying to increase the size of my list item markers with the following CSS:

li::marker {
  color: grey;
  font-size: 3.5rem;
}
<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

The resize works perfectly, but the markers are no longer aligned vertically with the list item contents.

I tried using vertical-align, but I can't seem to get the desired result:

li {
  vertical-align: middle;
}
li::marker {
  color: grey;
  font-size: 3.5rem;
  vertical-align: middle;
}
<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

I tried using position: absolute on the marker to move it. I also tried transform: translateY(x);, but I can't get either to move the marker at all for some reason… Plus I would hate to have to go back and fiddle with x every time I change the font size of the list item or marker.

Here is one of my attempts as an example:

li::marker {
  color: grey;
  font-size: 3.5rem;
  transform: translateY(1000rem);
}
<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

I've seen a lot of similar questions, but none of them seem to provide a solution which:

  • Doesn't introduce extra HTML markup
  • Doesn't introduce custom values that would need to change if the font size of the list item (or that of the marker) changes.
  • Doesn't require JavaScript

That being said, if I missed something, feel free to point me in the right direction and I will mark this as a duplicate myself.

vertical-alignment html-lists css
2 Answers

The before pseudo element solution can give you what you want (and personally it's what I'd use) but in case it is of use to others who for some reason are constrained to using marker, it is possible to set the content to a Unicode large circle as in this snippet and color it.

li::marker {
  content: '\2B24 ';
  color: gray;
}
<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

Note: tested OK on Chrome/Edge and Firefox on Windows 10. However, Safari on an iPad IOS (14) is showing a smaller circle.

user_108674540

Frankly, I wouldn't use marker as your styling options are deliberately restricted. Use before instead

Only certain CSS properties can be used in a rule with ::marker as a selector:

All font properties

The white-space property, color, text-combine-upright, unicode-bidi and direction properties & The content property

li {
  display: flex;
  align-items: center;
  padding: .5rem;
  border: 1px solid red;
}

li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: grey;
  margin-right: .5rem;
}
<ul>
  <li>Hello</li>
  <li>Gromit</li>
</ul>

user_28020400
Related