CSS

Achieve It with CSS Only! A Simple Guide to Adding Custom Numbering and Text to li Tags

 

In the world of web design, visual appeal and usability are crucial. Today, we will explore how to leverage the CSS counter-increment property to add numbering and custom text to list items (li tags). This method not only makes lists easier to follow for readers but also enhances the overall design.

Contents
  1. Adding Numbering to List Items with CSS
  2. HTML Structure
  3. Demo Page: Displaying Numbering and Custom Text in li Tags
  4. Further Applications
  5. Conclusion

Adding Numbering to List Items with CSS

Basic CSS Settings

First, let’s take a look at the basic CSS structure. The following styles set the font size and list styles for the webpage.

body{
  padding: 0;
  margin: 0;
  font-size: 18px;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:15px 0 30px 0;
  font-size: 18px;
}
ul{
  list-style: none;
  width: 400px;
  margin: 0 auto;
}

Using counter-increment

The counter-increment property is used to increment (increase) a CSS counter. By applying this property to li tags, you can automatically add numbers to each list item.

ul > li {
 counter-increment: count;
 position: relative;
 padding: 0 0 8px 4rem;
}

Adding Custom Text

Next, we use the :before pseudo-element and content property to add custom text, such as “Chapter” and “:”, before each list item. This part can be customized to any text you prefer.

ul > li:before {
 content:  "Chapter "counter(count)":";
 position: absolute;
 top: 10%;
 left: 0;
}

HTML Structure

To apply CSS styles, a proper HTML structure is required. Basically, we use ul and li tags.

<h1>Displaying Numbering and Custom Text in li Tags</h1>

<ul>
  <li>Text 1 Text 1 Text 1</li>
  <li>Text 2 Text 2</li>
  <li>Text 3</li>
  <li>Text 4 Text 4</li>
  <li>Text 5 Text 5 Text 5</li>
</ul>

Demo Page: Displaying Numbering and Custom Text in li Tags

To see how this style works in practice, we have prepared a demo page. You can access it via the link below. The demo page will allow you to observe how the list items are displayed.

Demo: Displaying Numbering and Custom Text in li Tags

Further Applications

With this basic setup, various styles can be applied. For example, different font styles and colors can make the list more visually appealing. Additionally, you can modify the format of the counter numbers.

Customizing Font Styles

ul > li:before {
  font-weight: bold;
  color: #333;
}

Changing Number Format

@counter-style roman {
  system: additive;
  symbols: I V X L C D M;
  addends: 1 5 10 50 100 500 1000;
  range: 1 1000;
}
ul {
  list-style: roman inside;
}

Conclusion

By using the counter-increment property in CSS, you can easily add numbering and custom text to list items. This technique is an excellent way to enhance the design of a webpage while making information more accessible to readers. Experiment with different styles using the examples provided!

　

※ If you reuse this content, please do so at your own risk.
Do not copy the Google Analytics tag from the demo page’s head tag.

counter-increment li Tags
RELATED POST