Member Avatar for kaleemz

i don't have an exact idea but can someone please guide me that are custom bullets of the style (1) or style (a) etc possible in HTML? If yes can you please provide me help that what CSS i have to create to achieve this

  • 3 Contributors
  • 2 Replies
  • 66 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #114696

Dani AI

Generated

Nice question, — and good pointers from and @GreenDay2001. Keeping the HTML semantic (an ordered list for numbered items) is the best starting point. From there you can change the visual number format without touching the markup by using CSS counters or pseudo-elements. That gives you markers like "(1)", "(a)", "A.", etc., while preserving list semantics for browsers and assistive tech.

A compact approach uses a custom class on the list, a counter, and generated content for each list item:

ol.custom {
  counter-reset: item;
  list-style: none;
}

ol.custom li {
  counter-increment: item;
}

ol.custom li::before {
  content: "(" counter(item) ") ";
}

To get alphabetic labels, the counter() function accepts a style keyword (for example lower-alpha) as a second argument:

ol.alpha li::before {
  content: "(" counter(item, lower-alpha) ") ";
}

Notes and cautions: keep enough left padding so numbers do not overlap text, test visually across browsers, and be aware older browsers or some screen readers may not expose purely CSS-generated text. If the numbering must be announced reliably, prefer native list numbering or include accessible attributes. If you need help matching exact spacing or supporting legacy browsers, mention which browsers you must support and we can refine the CSS.

Recommended Answers

All 2 Replies

Member Avatar for Member #114696

To have numbering before your lines use <OL> tag i.e. ordered list.
http://www.w3schools.com/tags/tag_ol.asp

However the type attribute is deprecated so you will have to use CSS list-style type property.

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.