I do love to create and format a good list. No Two Lists are ever the same.
Unordered Lists
BULLET – Solid Circle
- Solid Circle
- Solid Circle
- Solid Circle
BULLET – Outline Circle
- Outline Circle
- Outline Circle
- Outline Circle
BULLET – Solid Square
- Square
- Square
- Square
UNORDERED LIST – The Basic Unordered List is an HTML element used to create a list of items without numbering them. It is often used for menus, navigation, and lists that don’t require numbering. Lists can be styled using CSS, allowing you to customize the appearance of the list. It is also a useful tool for organizing information in a way that makes it easier to read and understand.
The Unordered List can be found in many places, such as websites, apps, and even printed materials. You would expect to see a Unordered List in places where there are multiple items that need to be organized in an easy-to-read format. The Solid Circle Bullet, Outline Circle Bullet, and Square Bullet are the most basic of the HTML/CSS bullets.
Ordered Lists
BULLET – Numbered
- Lorem, ipsum dolor.
- Iusto, adipisci eum.
- Fuga, sit labore!
BULLET – Numbered with Indent
- Lorem, ipsum dolor.
- Iusto, adipisci eum.
- Lorem, ipsum dolor.
- Iusto, adipisci eum.
- Lorem, ipsum dolor.
- Iusto, adipisci eum.
- Fuga, sit labore!
- Fuga, sit labore!
- Fuga, sit labore!
List of Nested Decimals
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
List with Number Break
- Wake up
- Feed dog
- Start blog post
โฆ Page Break with List โฆ
- Finish blog post
- Go to bed
Image Bullets
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
Reverse Court Down Bullets
- Northern Exposure
- The Sopranos
- Halt & Catch Fire
- Battlestar Galactica
- The Shield
- Game of Thrones
- Downton Abbey
- Six Feet Under
- LOST
- Friday Night Lights
Random Order Bullets
Need to change the order?
- Northern Exposure
- The Sopranos
- Halt & Catch Fire
- Battlestar Galactica
- The Shield
- Game of Thrones
- Downton Abbey
- Six Feet Under
- LOST
- Friday Night Lights
Custom Text List Bullet
- Preheat oven to 425ยฐF
- Mix all the ingredients
- Dump it all into a greased pan
- Bake for 40 minutes
- Take out and let cool 30 mintes
- Eat
- Eggs
- Flour
- Water
Inside and Outside Bullets
Change the position of the bullet while changing the values.
- Lorem, ipsum.
- Similique, culpa.
- Atque, vel?
- Repudiandae, expedita.
- Perferendis, modi.
- Lorem, ipsum.
- Similique, culpa.
- Atque, vel?
- Repudiandae, expedita.
- Perferendis, modi.
Columized List
- Lorem.
- Quibusdam!
- Recusandae.
- Facere?
- Sit?
- Recusandae!
- Ea!
- Amet!
- Eos.
- Similique.
- Excepturi.
- Nemo?
- Aspernatur!
- Ipsam.
- Accusantium.
- Dignissimos?
- Nesciunt.
- Voluptatum?
- Vero!
- Nesciunt!
- Ea.
- Cumque!
- Excepturi.
CSS Counters
Automatically Number Elements with CSS Counters. While not completely clear from the example, the CSS Counters method to me is very powerful (give me five minutes in the future to dig deeper into CSS Counters and creating some some creative options using the method).
Properties
counter-reset
– Reset or initialize your counter.counter-increment
– Increment the variable of an already initialized counter.counter()
– used inside the content property to add up the counts.counters()
– used for inherited counting, and generates the counter variable.content
– Add up the count value (string)
This is a fun example of using the CSS Counters with increases in increments of 10 with ๐ ๐ฅซ๐ฅฃ emojis insert before the bullet item.
Title for first bullet point.
Title for second bullet point.
Title for third bullet point.