Member Avatar for ryy705

Hello,
I am trying align bullets with the bottom of the text in the li tags. I used different font sizes for text and bullets because that's what the design calls for. But since list items and anchor tags are inline elements I can't use top and bottom margin to align them with the bullets. Please advice. Any help is appreciated.

Here is my HTML:

<ul id="nav">
  <li><a href="">Buyers</a></li>
  <li><a href="">Sellers</a></li>
  <li

Here's my CSS:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssreset/reset-min.css">
  <style>
    ul#nav li{color:#FDD458;list-style-type:square;list-style-position:inside;font-size:26px;}
    ul#nav li a{color:#666;text-decoration:none;font-size:16px;}
  </style>
  • 5 Contributors
  • 5 Replies
  • 130 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by JohnRackon

Dani AI

Generated

A few practical options beyond the image/background suggestions from and (and the fix reported by ), with notes on when to use each.

Create the marker with a CSS pseudo-element for full control

  • Keep the UL/LI markup (accessibility intact), remove the default marker, and draw the bullet yourself. The pseudo-element can be sized independently and aligned with vertical-align or nudged with transform for pixel-perfect placement.
ul#nav { list-style: none; margin: 0; padding: 0; }
ul#nav li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #FDD458;
  margin-right: 8px;
  vertical-align: text-bottom;   /* aligns the bullet to the bottom of the text line */
  transform: translateY(1px);    /* small nudge if needed */
}

Use ::marker when you want simpler styling and maximum semantics

  • The native ::marker pseudo-element is supported in modern browsers and lets you change size/color without hiding the marker. It is more limited than a pseudo-element (no transforms or complex positioning), so use it when a simple font-sized marker is sufficient.
ul#nav li::marker {
  color: #FDD458;
  font-size: 1.4em;
}

Troubleshooting tips

  • If you add a background to the a, make the a display:inline-block and use padding to make room for the graphic so vertical alignment behaves.
  • vertical-align: text-bottom or bottom on an inline-block marker generally gives the “bullet at the bottom of the text” effect; use transform for small pixel tweaks.
  • Keep the semantic list markup so assistive tech still understands it; decorative bullets drawn with CSS (empty content) are fine, but avoid moving meaningful content into generated text.

References and compatibility notes: MDN docs for ::before and ::marker are practical starting points: ::before and ::marker.

Recommended Answers

All 5 Replies

Member Avatar for macneato

What i would suggest is using a background image (of a square) instead. This will help with the positioning. Sure you can find a whole bunch online

Here is one

Oh, by the way.

<ul id="nav">
  <li><a href="">Buyers</a></li>
  <li><a href="">Sellers</a></li>
</ul>
Member Avatar for Veneficae

Using an image to replace the bullets is your best shot.

The following code will achieve just that.

#nav li {
list-style-image: url(imagepath/filename.gif); /* I used .gif to suit my reply; any format can be used. */
}

If you want bullets, simply make a file in Photoshop or another graphics editor, make sure the image is the height of the list item and then make a black circle in the lower portion, seeing as how you want it at the bottom of the list item. Save it with your preferred file format (I'd save it as a GIF as a bullet is a small image with limited colour range), then link it up in the code above.

Replace 'imagepath' with the... image path, and 'filename' with the correct one, and that'll replace the bullets. The good thing about this method is that if the image was ever misplaced or deleted the list item image downscales to the original bullet points, so your visitors will still know they're looking at list items, rather than organised text.

Edited by Veneficae because: Slight grammar changes.
Member Avatar for ryy705

Switching to an image did the trick. I didn't even mess with the margin. Thanks.

Member Avatar for RyanMoster

I think this code is simply describing that how to create a list not the alignment of the list.

Member Avatar for JohnRackon

You can do the amendment in the code by just giving the alignment option instead of picking mistake.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.