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

Multer is not recognizing the uploaded file and is returning req.file

Monitoring clicks on links that lead to external websites

Enhancing Image Quality with jspdf and Html2Canvas

AngularJS seems to be failing to display the initial option in the input select field

Exploring the depths of npm in the realm of frontend development

Storing the selected radio button value in AsyncStorage using React Native: A step-by-step guide

Having trouble with jQuery attribute selectors? Specifically, when trying to use dynamic attribute

What is the significance of the "component" prop within MUI components?

What's the issue with the submit button not functioning on the form?

Please enter the text in the field provided at the bottom using IE10

Center a span vertically inside a div as the text within the span grows to occupy the entire div

Ways to incorporate a smooth transition between the opened and closed fab functionality

Using importNode in the context of Microsoft Edge involves transferring a

Guide to recreating the Material Ripple effect using Vuejs

Tips for positioning slideshow below header in web design

There was a hiccup encountered while trying to follow the steps for creating a

Retrieving data using a class in an AJAX form submission

Tips for accessing and adjusting an ngModel that is populated by an attribute assigned via ngFor

Tips for making a website display in landscape mode rather than portrait orientation

Issues persist with AngularJS integration using Modernizr