Unordered List

Working Example

Grocery Shopping List
  • Milk
  • Bread
  • Eggs
  • Fruits (Apples, Bananas, Oranges)
  • Vegetables (Carrots, Spinach, Tomatoes)
  • Cheese
  • Butter
  • Coffee

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grocery Shopping List</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>

    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
        <li>Fruits (Apples, Bananas, Oranges)</li>
        <li>Vegetables (Carrots, Spinach, Tomatoes)</li>
        <li>Cheese</li>
        <li>Butter</li>
        <li>Coffee</li>
    </ul>

</body>
</html>
* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto Slab', serif;
    font-size: 1.2rem;
    margin: 0;
    padding: 1rem;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background-color: #f0f8ff; /* Light blue background */
}

ul {
    padding: 0;
    margin: 0;
    max-width: 700px;
    position: relative;
}

ul::before {
    content: '';
    width: 0.5rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 5%;
    background: transparent;
    z-index: -1;
}

li {
    list-style-type: none; /* Remove default bullets */
    padding: 0.5rem 1.5rem 1rem 2.5rem;
    border-radius: 1.5rem;
    background: transparent;
    position: relative;
}

li::before {
    content: "•";
    position: absolute;
    left: 0.8rem;
    font-weight: bold;
    color: green;
    font-size: 1.5rem;
}

li + li {
    margin-top: 1rem;
}