Creating an HTML list that displays the UL Level numbers as the list values can be done by following these steps

Trying to create a styled HTML list with CSS that resembles the following:

1. List item

    2. List item

        3. List item

        3. List item

        3. List item

            4. List item

            4. List item

    2. List item

    2. List item

1. List item

1. List item

    2. List item

1. List item

Experimenting with different methods in CSS to achieve the desired list appearance without current numbering displayed:

ul {
  counter-reset: section;
  list-style-type: none;
}

li:before {
  color: red;
  counter-increment: section;
  content: counters(section, ".") " ";
}
<ul>
    <li>LIST ITEM</li>
    <li>
        <ul>
            <li>LIST ITEM</li>
            <li>
                <ul>
                    <li>LIST ITEM</li>
                    <li>LIST ITEM</li>
                </ul>
            </li>
            <li>LIST ITEM</li>
        </ul>
    </li>
    <li>LIST ITEM</li>
    <li>
        <ul>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
        </ul>
    </li>
    <li>LIST ITEM</li>
</ul>

htmlcsssass

Answer №1

To avoid unnecessary use of a counter, consider using the :before pseudo class for each level instead.

Snippet example:

ul {
  list-style-type: none;
  font: 13px Verdana;
}

ul li:before {
  content: "1. Link ";
  color: red;
}

ul li li:before {
  content: "2. Link ";
}

ul li li li:before {
  content: "3. Link ";
}
<ul>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>
        <ul>
          <li>LIST ITEM</li>
          <li>LIST ITEM</li>
        </ul>
      </li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
</ul>

Update: For a dynamic solution, utilize the parents() jQuery method to calculate the level of each li

Snippet example:

$("li").each(function() {
  $(this).attr("data-level", $(this).parents("ul").length)
})
body {
  margin-top: 40px;
}

ul {
  list-style-type: none;
  font: 13px Verdana;
  margin-top: -15px;
  position: relative;
  background: #fff;
}

ul li:before {
  content: attr(data-level) ". ";
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>
        <ul>
          <li>LIST ITEM</li>
          <li>LIST ITEM</li>
        </ul>
      </li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
  <li>
    <ul>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
      <li>LIST ITEM</li>
    </ul>
  </li>
  <li>LIST ITEM</li>
</ul>

Answer №2

Just when I thought "you can't do that with CSS"... turns out, you actually can.

By using incredibly specific child selectors, it's possible :p

ul {
  list-style-type:none;
}

ul li:before {
  content:"1. ";
}

ul > ul li:before{
  content:"2. ";
}

ul > ul > ul li:before{
  content:"3. ";
}

ul > ul > ul > ul li:before{
  content:"4. ";
}

/* and so on, and so forth :p */
<ul>
    <li>LIST ITEM</li>
    <ul>
        <li>LIST ITEM</li>
        <ul>
            <li>LIST ITEM</li>
            <li>LIST ITEM</li>
        </ul>
        <li>LIST ITEM</li>
    </ul>
    <li>LIST ITEM</li>
    <ul>
        <li>LIST ITEM</li>
        <li>LIST ITEM</li>
        <li>LIST ITEM</li>
        <li>LIST ITEM</li>
        <ul>
          <li>LIST ITEM</li>
          <ul>
                <li>LIST ITEM</li>
          </ul>
       </ul>
    </ul>
    <li>LIST ITEM</li>
</ul>

Come on, isn't that the most clever and absurd line of CSS you've seen today? :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to display HTML content stored in a String on Xcode for IOS?

Looking for a way to load editable HTML inside my IOS app, I came up with the following approach: To achieve this, I created a NSString with a format that allowed me to generate a String containing the HTML code based on various variables: NSString *goog ...

htmliosxcodestring

What is the best way to ensure that the width of a div fills its parent container?

I need my divs(.give, .sep, .take) to completely fill the width of its parent container (.trade). This is the HTML code: <div class="trade"> <div class="give"></div> <div class="sep"></div> ...

htmlcss

Using the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

javascripthtmlarraysstring

Showing information in a tree structure using HTML, CSS, and JQuery

Trying to figure out how to present a large amount of data in a tree structure. Each node could have multiple children and parents, requiring a dynamic representation. I've explored various JavaScript libraries like D3 and Raphael, but unfortunately, ...

javascriptjqueryhtmlcsstree

Dynamically populate 7 select boxes with options using JQuery

I have a webpage that includes 14 different dropdown menus, one for each day of the week (Monday to Sunday). Each day has two dropdowns: one for opening time and one for closing time. I used jQuery to populate all 14 dropdowns with a pre-defined list of ho ...

javascriptjqueryhtml

I'm wondering why my element is aligning itself with its sibling. It seems that when the parent has overflow set to hidden, it causes the children's

Let me break down the diagram below for you: The main box is marked in yellow and serves as the parent element. Within this parent box, there are two child elements, one in black and one in cyan. To hide any excess content of the cyan box that overfl ...

htmlcssoverflowmargin

Is it possible to continuously generate webpages using AJAX?

Is there a way to achieve an infinite scrolling effect in all directions using ajax requests without the need for flash or silverlight? If anyone has an example of this, I would love to see it! Thank you for your time. ...

javascriptjqueryhtmlcss

Ways to enlarge the parent container and reveal a concealed child element upon hovering without impacting neighboring containers

Currently, I am diligently working on the company service boxes and have a particular need... When hovering over: 1. The parent div should scale up and acquire box shadow without impacting the neighboring service boxes (it should appear to stand out above ...

javascriptjqueryhtmlcss

Issue with Mat-AutoComplete arising while utilizing a formArray

After adding a form array to account for multiple rows, I had to modify my definition from: shoppingCartList Observable<any[]>; to shoppingCartList: Observable<any[]>[] = [];. However, this change resulted in an error in my filter function whic ...

javascripthtmlangularangular-materialmat-autocomplete

Position the div element beside the image, rather than below it

I am having an issue with Bootstrap where the card I want to display on the right of an image is appearing below it instead. I attempted to use the display: inline-block property, but unfortunately, that did not solve the problem. I also explored other so ...

htmlcsstwitter-bootstrapbootstrap-5

The custom attribute in jQuery does not seem to be functioning properly when used with the

I am currently working with a select type that includes custom attributes in the option tags. While I am able to retrieve the value, I am experiencing difficulty accessing the value of the custom attribute. Check out this Jsfiddle for reference: JSFIDDLE ...

javascriptphphtmljquery

The Masonry Grid is leaving empty spaces unfilled

I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...

cssflexboxsveltekit

Recreating dropdown menus using jQuery Clone

Hey there, I'm facing a situation with a dropdown list. When I choose "cat1" option, it should display sub cat 1 options. However, if I add another category, it should only show cat1 options without the sub cat options. The issue is that both cat 1 a ...

javascriptjqueryhtmlajax

Ways to adjust Safari printing margins using CSS to achieve borderless printing

I am struggling to eliminate margins when printing a webpage to PDF in Safari. Despite setting the page size to 'A4 borderless' in the print dialogue, Safari on OSX continues to add extra margins around my HTML. Enabling 'print backgrounds&a ...

cssprintingwebkit

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Leverage the Google Drive API for the storage of app-specific data

I'm currently developing a JavaScript application that runs on the client side and need to store a JSON object containing configuration details in a Google Drive Appdata file. Through the Google Drive API, I can successfully check for the file within ...

javascriptjqueryhtmlgoogle-drive-api

Expanding a feature that modifies the CSS properties of every input element

Creating a text tracking (letter-spacing) demonstration where range sliders are used to update CSS properties. I'm looking to improve the functionality so that the labels also update dynamically, without repeating output2.textContent = this.value;. An ...

javascriptcss

centering an angular material card on the webpage

Currently, I have developed a Registration script that enables users to Sign Up on my website. However, the issue I am facing is that the angular material card, which houses the sign up interface, is not centered. Despite trying various methods such as & ...

htmlangularjsangular-materialcenter-align

Display user's name in navigation bar using asp.net mvc

When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

htmlcss