CODEWITHSUNDEEP
csshtmlwordpresshtml-lists
Pao Rad
Pao Rad

Reputation: 71

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

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?

Upvotes: 1

Views: 15006

Answers (3)

Danny
Danny

Reputation: 7518

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";
}

JSFiddle

Other special characters can be found here.

Upvotes: 3

Frederik Spang
Frederik Spang

Reputation: 3454

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/

Upvotes: 3

Dan H
Dan H

Reputation: 626

Yup. Use CSS, list-style-image.

http://www.w3schools.com/cssref/pr_list-style-image.asp

Upvotes: 2

Related Questions