Skip ordered list item numbering

前端 未结 5 2036
轮回少年
轮回少年 2021-02-18 22:34

I have an ordered list and I\'d like to skip the number output from a particular item.

Traditional output:

1. List item
2. List item
3. List item
4. List         


        
5条回答
  •  天涯浪人
    2021-02-18 23:30

    This is my solution (only with CSS) that allow you to keep the normal usage of an li (list-item) from an ol (ordered list). That means all li item are consitent and there are no item that not represent the same thing as its neighbour.

    Code just below :

     .term-and-condition li {
        position: relative;
      }
      .term-and-condition ol ol {
        list-style-type: lower-latin;
      }
      .term-and-condition h2 {
        position: absolute;
        top: -2.4em;
        left: -1.5em;
      }
      .term-and-condition h3 {
        position: absolute;
        top: -2.4em;
        left: -1.5em;
      }
      .term-and-condition h2 + *,
      .term-and-condition h3 + * {
        margin-top: 4em;
      }
    
      
        
        Skip ordered list item numbering
      
      
        

    Participants agree to be bound by these Terms and Conditions

    1. The Promoter

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.

    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.

    3. Eligibility

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.

    4. Entry

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.

    5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.

    6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.

    7. Entrants must upload an image and text that:

      1. Lorem ipsum dolor sit amet, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere

      2. consectetur adipisicing elit. Veritatis dolorum consequuntur,

      3. in amet libero magnam consectetur facere,

      4. accusantium sed, adipisci aliquam unde! Sit, iure.

      5. Additional requirements

        All entries must be the participant’s own image or have the relevant permission

      6. The entrant must be the lorem

    8. Winner Selection

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tenetur minus dolores! Natus harum pariatur voluptas, voluptatibus magnam, animi explicabo eos laudantium delectus nobis repellat dicta eveniet, et blanditiis ducimus!

    — See the Codepen

提交回复
热议问题