CODEWITHSUNDEEP
css
slhck
slhck

Reputation: 38691

Change an unordered list's appearance from a dot to an underscore

A client asked me if I could change the appearance of unordered lists throughout a website.

Now, using the default dot, they look like this:

  • A normal
  • unordered list

The desired output would be (using the underscore _):

_  A normal
_  Unordered list

How could I achieve that using CSS? (if possible)

Upvotes: 1

Views: 1702

Answers (2)

x10
x10

Reputation: 3834

Yes, you can achieve that using CSS.

HTML: 

<ul>  
    <li>test</li>  
    <li>test</li>  
</ul>

CSS:

ul {
    list-style: none;
}

li:before {
    content: '_ ';
}

Here's a relevant fiddle: http://jsfiddle.net/q8v4k/1/

Upvotes: 3

Kon
Kon

Reputation: 27441

You'll have to provide your own image as a bullet template. 

list-style-image: url(bullet_underscore.png);

Upvotes: 2

Related Questions