mhulse / css-issues

Practical CSS code snippets and examples.
11 stars 1 forks source link

Custom list counter with nested lists #191

Open mhulse opened 5 years ago

mhulse commented 5 years ago
.avr_list-roman li,
.avr_list-alpha li {
    margin-left: 1rem;
    margin: 1rem 0 1rem 3rem;
    list-style: none;
    position: relative;
}

.avr_list-roman li::before,
.avr_list-alpha li::before {
    position: absolute;
    top: 0.1em;
    /* Could do left: -1rem, but this will allow the list item to grow to the left: */
    right: calc(100% + 1rem);
}

.avr_list-roman {
    counter-reset: listRoman;
}
.avr_list-roman li {
    counter-increment: listRoman;
}
.avr_list-roman li::before {
    content: counter(listRoman, lower-roman) ")";
}

.avr_list-alpha {
    counter-reset: listAlpha;
}
.avr_list-alpha > li {
    counter-increment: listAlpha;
}
.avr_list-alpha > li::before {
    content: counter(listAlpha, lower-alpha) ")";
}
<ol class="avr_list-alpha">
    <li>
        If you are a US copyright owner or an agent of a US copyright owner and believe that any User Content or other content on this site or app infringes upon your copyrights, you may submit a notification pursuant to Title 17, United States Code, Section 512(c)(3), the Digital Millennium Copyright Act ("DMCA") by providing us with the following information in writing:
        <ol class="avr_list-roman">
            <li>identification of the copyrighted work or works claimed to have been infringed;</li>
            <li>identification of the material that is claimed to be infringing and information reasonably sufficient to permit us to locate the material;</li>
            <li>your contact information including name, address, telephone number, and, if available, an email address;</li>
            <li>a statement that you have a good faith belief that use of the material in the manner complained of is not authorized by the owner of the work, its agent, or the law;</li>
            <li>a statement that the information in the notification is accurate, and under penalty of perjury, that you are authorized to act on behalf of the owner of an exclusive right that is allegedly infringed; and</li>
            <li>your physical or electronic signature.</li>
        </ol>
    </li>
    <li>You acknowledge that if you fail to comply with all of the requirements of this Section, your DMCA notice may not be valid.</li>
</ol>