How do I create a Unordered list in html with sub arrows?

Question

I want to know how to accomplish something similar to this in wordpress. Any suggestions? maybe a sample code.

enter image description here

Can you show me an example how to apply it to the sub bullets?

http://www.artishock.net/coding/css-list-styling-using-ascii-special-characters/ — Danny, Jan 17 '14 at 19:55

score 3 · Answer 1 · answered Jan 17 '14 at 19:59

You could use li:before{ content:"....";} to make an arrow? Like this:

<ul>
    <li>Disaster</li>
    <ul>
        <li>stuff</li>
        <li>Stuff2</li>
    </ul>
</ul>

CSS:

ul ul li:before {

         content: "\2192 \0020";
}
ul ul {
    list-style: none;
}

See it in function here, on this fiddle: http://jsfiddle.net/f9AzK/

score 2 · Accepted Answer · answered Jan 17 '14 at 19:55

2

Yup. Use CSS, list-style-image.

answered Jan 17 '14 at 19:55

Dan H

score 2 · Answer 3 · answered Jan 17 '14 at 20:02

Use li:before { content: ...; }

HTML

<ul>
    <li>Disater Assistance Center Manager
        <ul id="sub">
            <li>San Jaun</li>
        </ul>
    </li>
</ul>

CSS

#sub { list-style:none; }
#sub li:before {
    content: "\2192 \0020";
}

Other special characters can be found here.

3 Answers3