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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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 (confined to black it appears):

li::marker {
  content: '\2B24 ';
}

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

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>