Align the number of an Unordered List to the left

Question

Align the number of an Unordered List to the left

Exploring UN-ordered lists in HTML has led me to wonder if it's possible for dynamically generated ul tags to display like this:

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

When I use the jquery append function to add UL elements to a DIV, the result I get looks like this:

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

Is there a CSS trick to align the stars to the left?

javascript jquery html css html-lists

Answer 1

Answer №1

One way to achieve this is by using the combination of 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>

Answer 2

One way to achieve this is by using the combination of 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>

Answer 3

Answer №2

One trick to replace standard bullet points is to use pseudo elements positioned absolutely. The unicode character \u2022 can be used, but feel free to choose any other character you prefer. You can see an example here: 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>

Answer 4

One trick to replace standard bullet points is to use pseudo elements positioned absolutely. The unicode character \u2022 can be used, but feel free to choose any other character you prefer. You can see an example here: 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>

Align the number of an Unordered List to the left

Answer №1

Answer №2

Similar questions

Despite following the instructions in the manual, the jquery code completion feature in Netbeans is not functioning as expected

Utilizing bootstrap for a responsive design that includes max-height constraints and horizontal

Difficulty in clearing form values/content despite successfully submitting

extract the information from the JSON structure

Switching Text in ReactJS from V to X: A Tutorial

Slider Carousel for Multiple Items: Horizontal Orientation

Tips for automatically selecting the day when choosing a date

In Nodejs, there is a way to determine the size of a document stored

Chrome experiences a hidden stalling issue due to a large WebGL texture

Error: Unable to locate module: Could not find '@/styles/globals.scss'

Issue with div element not stretching to 100% width

The headline is being improperly rendered inside a black box on Firefox

Monitor the status of an AJAX request for fetching JSON data in a Rails application

When the enter key is pressed, the form will be submitted and the results will be displayed in a modal window without

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Activate jqGrid's navigation bar save icon when the ondblClickRow event is triggered

The information does not display in the AngularJS-generated table

Click on a link to open it in the current tab with customized headers

Troubleshooting the issue with the default dropdown select in AngularJS

Removing empty commas from a string with JQuery