Created
December 11, 2024 11:10
-
-
Save joakin/4fea42cc693e239361869640d3384a48 to your computer and use it in GitHub Desktop.
HTML mixed item lists (paragraph, bullet, ordered, checklist)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Custom List Items</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| max-width: 600px; | |
| margin: 40px auto; | |
| color: #333; | |
| background-color: #f4f4f4; | |
| } | |
| list, ul-list-item, ol-list-item, p-list-item, check-list-item { | |
| display: block; | |
| } | |
| list { | |
| counter-reset: ol-counter; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| /* Common list item styles */ | |
| ul-list-item, | |
| ol-list-item { | |
| margin-bottom: 10px; | |
| position: relative; | |
| padding-left: 30px; | |
| } | |
| /* Paragraph and checkbox list items - no padding */ | |
| p-list-item, | |
| check-list-item { | |
| margin-bottom: 10px; | |
| } | |
| list>:not(ol-list-item) + ol-list-item { | |
| counter-set: ol-counter 0; | |
| } | |
| ol-list-item::before { | |
| content: counter(ol-counter) "."; | |
| counter-increment: ol-counter; | |
| position: absolute; | |
| left: 0; | |
| color: #666; | |
| font-weight: 600; | |
| } | |
| /* Bullet list item */ | |
| ul-list-item::before { | |
| content: "•"; | |
| position: absolute; | |
| left: 0; | |
| color: #666; | |
| } | |
| /* Checkbox list item */ | |
| check-list-item { | |
| display: flex; | |
| align-items: center; | |
| } | |
| check-list-item input { | |
| margin: 0 18px 0 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <list> | |
| <ul-list-item>This is a bullet list item</ul-list-item> | |
| <ul-list-item>This is a bullet list item</ul-list-item> | |
| <ol-list-item>This is an ordered list item</ol-list-item> | |
| <ol-list-item>This is an ordered list item</ol-list-item> | |
| <p-list-item>This is a paragraph item</p-list-item> | |
| <p-list-item>This is a paragraph item</p-list-item> | |
| <ol-list-item>This is an ordered list item</ol-list-item> | |
| <ol-list-item>This is an ordered list item</ol-list-item> | |
| <check-list-item><input type="checkbox"> This is a checkbox list item</check-list-item> | |
| <check-list-item><input type="checkbox"> This is a checkbox list item</check-list-item> | |
| <ol-list-item>This is an ordered list item</ol-list-item> | |
| <ol-list-item>This is an ordered list item</ol-list-item> | |
| </list> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment