Member Avatar for minbor

Hello,

I'd like to know is there a way to specify what character to use in the unordered list?
for example, i'g like to have a list with '-' or '>' for a bullet, but cant find a way to do this in html or css.
All ideas very weclome

Thanks for the replies

minbor

  • 4 Contributors
  • 3 Replies
  • 126 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by rockyourweb

Dani AI

Generated

Several practical options exist for custom list bullets. As asked, you can use images (as suggested) or a background trick (as showed), but both add assets and extra layout work for nested lists and high-DPI screens. A more flexible, CSS-first approach works well today and avoids extra files.

Modern method (preferred): use the marker/pseudo-element API to inject a custom character. Example using ::marker (supported in current browsers — see details on MDN):

ul.custom li::marker {
  content: ">";
  color: #333;
}

Fallback / broader control: when you need full styling (color, size, alignment) or older-browser support, suppress the default marker and insert your own with ::before on the li:

ul.custom { margin:0; padding:0; }
ul.custom li { position:relative; padding-left:1.2em; }
ul.custom li::before {
  content: ">";
  position:absolute;
  left:0;
  top:0;
  color:#666;
  line-height:1;
}

Accessibility and semantics: if the symbol is purely decorative, CSS-generated content is fine. If the symbol carries meaning (for example, it denotes status or is required reading), include it in the HTML so assistive technologies will expose it. For decorative DOM bullets you can mark them as hidden to AT (aria-hidden="true"). Test nested lists and screen-readers when changing how markers are produced.

Further reading and compatibility details:

These CSS techniques provide crisp, scalable bullets without extra images and let you implement simple characters like - or > or any Unicode arrow cleanly.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

Probably the easiest and most compatible way is to make a .gif image of the character you want. Then use:

.bul {list-style-image: url(broketbullet.gif);}

Then, at the appropriate list:

<ul class="bul">
...
</ul>

Note that if you have a sublist inside the list with the custom bullets, you will need to create another style to return the bullets or numbers of the inner list back to the proper kind.

Member Avatar for rockyourweb

You can try this in css file :

.list ul { background:url(images/imagename.gif) center left no-repeat;
padding-left:15px;
list-style:none;
}

and use div class list in your html file like this :

<ul class="list">
<li>text</li> 
<ul>
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.