How can I vertically align a list item marker

Question

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.

Misshape

Answer 1

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>

Lynelllynelle

I searched way too long for this. Thank you so much – Gilli

Answer 2

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.

Skeen

If I add color: red;, that works for me on latest chrome on mac. Are you saying that doesn't work for you? – Misshape

Thanks for spotting - I thought I'd tried color but obviously not correctly. I've edited the answer. However, in doing that I noticed that a large circle was shown fine on my Windows 10 but on Safari (on iPad IOS 14) it took the color OK but showed a small circle. I'll investigate. – Skeen

Answer 3

Add ::before with css:

content: "";
display: inline-block;
vertical-align: middle;

Kranz

Answer 4

li::marker {
  color: grey;
  font-size: 3.5rem;
}

span{
position:relative;
bottom:11px;}

<ul>
  <li><span>Hello</span></li>
  <li><span>Gromit</span></li>
</ul>

Since positioning do not work for markers, so we can't move it anywhere. Markers always start where the list starts. What I did is I wrapped the list text in span and position the span relatively. Hence, the marker is still pointing to the same place, but our list text is moved relatively. I think we achieved our goal.

Durwyn