Ordered list (HTML) lower-alpha with right parentheses?

Making marker alignment great again

When opting for custom counters, you might need to align the markers. Achieve a tailored alignment using CSS positional properties:

ol li {
  position: relative;
  padding-left: 20px; /* Adjust to taste, no hard rules! */
}
ol li::before {
  position: absolute;
  left: 0; /* Keeping it at left, because right is not always right */
}


This ensures a tidy left alignment for your list markers—it's like having your own personal typographer!

One nest does not make a summer: Handling nested lists

Nested ol's can cause style inheritance from parent, presenting you some unwanted surprises. Nip them in the bud with child selectors:

ol > li {
  /* Styles for direct offspring only, not for the distant cousins! */
}


This approach ensures that the nested lists maintain their original style.

Taking control with @counter-style

For those who love to play with advanced features, create a personalized @counter-style:

@counter-style custom-alpha {
  system: alphabetic; 
  symbols: 'a' 'b' 'c' 'd' 'e' 'f' 'g'; /* Yeah, we know the alphabet! */
  suffix: ") "; /* A little twist to add spice */
}


Then you can apply it using list-style-type:

ol {
  list-style-type: custom-alpha; /* Who said you can't customize? */
}


Just remember to cross-check browser compatibility for @counter-style, as not all browsers (especially Safari) are ready for high fashion.

Visualising the outcome

A side-by-side comparison often clarifies the difference between standard and customized list markers:

Type	Standard	Customized
List Marker	1.	a)
	2.	b)
	3.	c)

The transformation from numbered to alphabetic markers is as easy as ABC) D) E).

Turn the 'content' knob for amazing results

CSS content property is your pro mixer's knob to play with different effects. You can use it to add special characters, symbols, or even words:

ol li::before {
  content: counter(alpha-list, lower-alpha) ".🌟 "; /* 'a.🌟 ', 'b.🌟 ', let's rock and roll */
}


Test drive your customized list

While it's fun to get creative with lists, make sure the end result is user-friendly. Always check your list in different contexts to ensure it is easily readable and visually accessible. Remember, a good design is good business!