CSS list styles (3)

CSS list styling

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  ERROR
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>

<head>
    <link rel="stylesheet" type="text/css" href="../styles/a4.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

    <ol>
        <li class=""><a href="#">Grilled Flatfish With Pistachio-Herb Sauce</a></li>
        <li class=""><a href="#">Coconut Cod Chowder With Seasoned Oyster Crackers</a></li>
        <li class=""><a href="#">Tamarind-Glazed Black Bass With Coconut-Herb Salad</a></li>
        <li class=""><a href="#">Spicy Sweet-and-Sour Salmon With Dates</a></li>
    </ol>
    <span style="font-size: 0.6em; margin-top: 1em">
        Source: https://sharkcoder.com/blocks/list
    </span>

</body>

</html>

Stylesheet

ol {
    counter-reset: li;
    list-style: none;
    padding: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

ol a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    margin: .5em 0;
    background: #DAD2CA;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: .3s ease-out;
}

ol a:hover {
    background: #E9E4E0;
}

ol a:hover:before {
    transform: rotate(360deg);
}

ol a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #f9dd94;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}