CODEWITHSUNDEEP
csshtml-listsvertical-alignment
Shawn
Shawn

Reputation: 11391

How can I vertically align a list item marker

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:

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.

Upvotes: 12

Views: 17730

Answers (4)

prajjwal shukla
prajjwal shukla

Reputation: 29

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.

Upvotes: 2

Сергей Чабан
Сергей Чабан

Reputation: 11

Add ::before with css:

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

Upvotes: 1

A Haworth
A Haworth

Reputation: 36522

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.

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115240

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>

Upvotes: 13

Related Questions