List #3

Give your rating
3.7
3 votes
    • 12+
    • 4+
    • 4+
    • 10.5+
    • 5+
    • 18+
    • 25+
    • 14+
    • 4.2+
    • 1+
    • 37+
Demo
  • 681.00 B
  • HTML, CSS
  • List
  • MIT License
HTML
<ol>
    <li>Milk</li>
    <li>Water</li>
    <li>Bread</li>
    <li>Potato</li>
    <li>Apple</li>
</ol>
CSS
ol {
    line-height: 2.5;
}

ol li {
    list-style-type: none;
    counter-increment: item;
    color: #73767e;
}

ol li:before {
    content: counter(item);
    display: inline-block;
    width: 12px;
    height: 20px;
    font-family: "Indie Flower", cursive;
    margin-right: 5px;
    background-color: rgb(0, 102, 204);
    color: rgb(22, 26, 34);
    font-weight: bold;
    font-size: 140%;
    padding: 0 8px 8px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 1.1;
}

The code snippet is an interesting blend of HTML and CSS, focusing on creating and styling a simple ordered list of items. This list includes everyday items like Milk, Water, Bread, Potato, and Apple. The HTML part uses the <ol> tag to create this ordered list, which is pretty straightforward.

Now, let’s dive into the CSS part, which is where the magic happens. The CSS is used to style the list in a unique way. First, it adjusts the line height of the list for better readability. Then, it removes the default list-style-type to use custom numbering, which is defined in the :before pseudo-element for each list item li. This custom numbering is not just a simple number; it’s styled with a specific font family, background color, font size, and even rounded corners to make it pop and look modern. The color scheme used for the text and the background of the numbers ensures that everything is easy to read while also being visually appealing.

In essence, this code snippet transforms a simple HTML list into a stylish, custom-numbered list using CSS. It’s a great example of how a few lines of CSS can significantly enhance the visual presentation of web content.

Menu