::marker

Izbirnik ::marker izbere oznako elementa seznama.

PRIMER

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Osnovni marker s spremenjeno barvo */
        li::marker {
            color: #3498db;
            font-weight: bold;
        }

        /* Prvi seznam s posebnimi znaki */
        .custom-list-1 li {
            list-style-type: none;
        }
        
        .custom-list-1 li::marker {
            content: ">>> ";
            color: #e74c3c;
            font-size: 1.2em;
        }

        /* Drugi seznam s črkami */
        .custom-list-2 li {
            list-style-type: none;
        }
        
        .custom-list-2 li::marker {
            content: "@ ";
            color: #2ecc71;
            font-size: 1.2em;
        }

        /* Tretji seznam s številkami in črkami */
        .custom-list-3 li {
            list-style-type: none;
        }
        
        .custom-list-3 li::marker {
            content: "$ ";
            color: #9b59b6;
            font-size: 1.2em;
        }

        /* Basic styles */
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        ul {
            padding-left: 40px;
            margin: 20px 0;
        }

        li {
            padding: 5px 0;
        }

        h3 {
            color: #2c3e50;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h3>Običajen seznam</h3>
    <ul>
        <li>Običajen seznam element ena</li>
        <li>Običajen seznam element dva</li>
        <li>Običajen seznam element tri</li>
    </ul>

    <h3>Seznam z zvezdicami</h3>
    <ul class="custom-list-1">
        <li>Prvi element s posebnim markerjem</li>
        <li>Drugi element s posebnim markerjem</li>
        <li>Tretji element s posebnim markerjem</li>
    </ul>

    <h3>Seznam s srčki</h3>
    <ul class="custom-list-2">
        <li>Prvi element z drugim markerjem</li>
        <li>Drugi element z drugim markerjem</li>
        <li>Tretji element z drugim markerjem</li>
    </ul>

    <h3>Seznam s paragrafi</h3>
    <ul class="custom-list-3">
        <li>Prvi element s tretjim markerjem</li>
        <li>Drugi element s tretjim markerjem</li>
        <li>Tretji element s tretjim markerjem</li>
    </ul>
</body>
</html>

REZULTAT