CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-lists
NewBee
NewBee

Reputation: 839

Left aligning number of Un ordered List

I am playing around with UN-ordered list in HTML and was wondering if following display is possible on dynamically generated uls.

*    Hello
*        Hi
*        Bi
*    Name
*        Ron
*        Mat
*    Cloth
*        Color
*            Red

So i start with appending UL to DIV with jquery append function and keep adding depending upon the tree scope, but result i am getting is -

    *Hello
        *Hi
        *Bi
    *Name
        *Ron
        *Mat
    *Cloth
        *Color
            *Red

Is there a way to align stars to the left via CSS?

Upvotes: 0

Views: 47

Answers (2)

dippas
dippas

Reputation: 60553

you can use position:relative/absolute along with ::before

.ul {
  position: relative;
}
li {
  list-style: none
}
li::before {
  content: "*";
  position: absolute;
  left: 0;
}
<ul class="ul">
  <li>Hello
    <ul>
      <li>li</li>
      <li>bi</li>
    </ul>
  </li>
  <li>Name
    <ul>
      <li>Ron</li>
      <li>Mat</li>
    </ul>
  </li>
  <li>Cloth
    <ul>
      <li>Color
        <ul>
          <li>Red</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 1

Pat
Pat

Reputation: 2750

You use pseudo elements positioned absolutely in place of the standard bullet points. I used the unicode character of bullet point \u2022 but you can use whatever would like. Here is an example: https://jsfiddle.net/t65krsou/

ul{
  list-style: none;
}

#mainList{
  position: relative;
}


li:before{
  content: "\2022";
  position: absolute;
  left: 0;
}
<ul id="mainList">
  <li>
  hi
  <ul>
    <li>hi again</li>
  </ul>
  </li>
  <li>
  sup
    <ul>
      <li>yo</li>
    </ul>
  </li>
  <li>
  another!
    <ul>
      <li>I can do this</li>
      <li>all day!
      <ul>
        <li>see?</li>
      </ul>
      </li>
    </ul>
  </li>
  
</ul>

Upvotes: 1

Related Questions