CSS list style

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 class="list">
        <li class="list-item one"><span>Enclosed above, beneath, before, behind</span></li>
        <li class="list-item two"><span>In green uncertainty, from which a shark</span></li>
        <li class="list-item three"><span>At any time may dash</span></li>
        <li class="list-item four"><span>And doom you like some huge demonic fate...</span></li>
    </ol>

    <span style="font-size: 0.6em; margin-top: 1em">
        Source: https://sharkcoder.com/blocks/list
    </span>

</body>

</html>

Stylesheet

ol {
    counter-reset: item;
    list-style-type: none;
    line-height: 2.2;
    margin-left: -40px;
}

ol li {
    display: block;
    position: relative;
}

ol li span {
    margin-left: 40px;
}

ol li:before {
    content: counter(item) " ";
    counter-increment: item;
    color: #7eb4e2;
    position: absolute;
    top: 50%;
    margin-top: -1em;
    background: #f9dd94;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 2em;
    font-weight: 700;
}