开发者

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

开发者 https://www.devze.com 2023-03-05 20:19 出处:网络
A client asked me if I could change the appearance of unordered lists throughout a webs开发者_运维知识库ite.

A client asked me if I could change the appearance of unordered lists throughout a webs开发者_运维知识库ite.

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)


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/


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

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

精彩评论

暂无评论...
验证码 换一张
取 消