CSS Lists

Learn how to style and customize lists with CSS to create visually appealing and functional list layouts

What are CSS Lists?

CSS provides extensive control over the styling of HTML lists, allowing you to customize everything from bullet points and numbering to layout and animations. Proper list styling is essential for creating readable content and intuitive navigation.

Types of HTML Lists:

Unordered Lists (<ul>) - Bulleted lists for items without a specific order
Ordered Lists (<ol>) - Numbered lists for items with sequence or priority
Description Lists (<dl>) - Lists of terms with their descriptions

Unordered
List

Ordered
List

Description: List

CSS List Properties Reference

Property	Description	Values
list-style-type	Specifies the type of list item marker	disc, circle, square, decimal, lower-roman, upper-alpha, none, etc.
list-style-image	Uses an image as the list item marker	url(), none
list-style-position	Specifies the position of the list item markers	inside, outside
list-style	Shorthand for all list properties	type position image
counter-reset	Creates or resets a counter	name, initial-value
counter-increment	Increments a counter value	name, increment-value

CSS Lists Implementation Example

Example Code

/* CSS Lists - Styling and Customization */

/* Basic List Styling */
ul.basic-list {
  list-style-type: disc; /* Default bullet style */
  margin: 1rem 0;
  padding-left: 2rem;
}

ol.basic-list {
  list-style-type: decimal; /* Default numbering */
  margin: 1rem 0;
  padding-left: 2rem;
}

/* List Style Types */
ul.circle-bullets {
  list-style-type: circle;
}

ul.square-bullets {
  list-style-type: square;
}

ul.no-bullets {
  list-style-type: none;
  padding-left: 0;
}

ol.upper-roman {
  list-style-type: upper-roman;
}

ol.lower-alpha {
  list-style-type: lower-alpha;
}

ol.upper-alpha {
  list-style-type: upper-alpha;
}

/* Using Custom Images as Bullets */
ul.image-bullets {
  list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="%23ff6b6b"/></svg>');
}

/* Positioning List Markers */
ul.inside-markers {
  list-style-position: inside;
}

ul.outside-markers {
  list-style-position: outside; /* Default */
}

/* List Style Shorthand */
ul.shorthand {
  list-style: square inside; /* type position */
}

/* Custom Counters for Ordered Lists */
ol.custom-counter {
  counter-reset: custom-counter;
  list-style-type: none;
  padding-left: 0;
}

ol.custom-counter li {
  counter-increment: custom-counter;
  margin-bottom: 0.5rem;
}

ol.custom-counter li::before {
  content: "[" counter(custom-counter) "] ";
  font-weight: bold;
  color: #3498db;
  margin-right: 0.5rem;
}

/* Styling List Items */
ul.styled-items li {
  background-color: #f8f9fa;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  border-left: 4px solid #3498db;
}

ul.styled-items li:hover {
  background-color: #e9ecef;
  transform: translateX(5px);
  transition: all 0.3s ease;
}

/* Horizontal Lists */
ul.horizontal-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}

ul.horizontal-list li {
  background-color: #f8f9fa;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid #dee2e6;
}

/* Nested List Styling */
ul.nested-list ul {
  list-style-type: circle;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

ul.nested-list ol {
  list-style-type: lower-roman;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Custom Bullets with Pseudo-elements */
ul.custom-bullets {
  list-style-type: none;
  padding-left: 0;
}

ul.custom-bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

ul.custom-bullets li::before {
  content: "➤";
  position: absolute;
  left: 0;
  color: #e74c3c;
}

ul.checkmark-bullets {
  list-style-type: none;
  padding-left: 0;
}

ul.checkmark-bullets li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.75rem;
}

ul.checkmark-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #27ae60;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

/* Numbered List with Leading Zeros */
ol.leading-zeros {
  list-style-type: decimal-leading-zero;
}

/* Description Lists */
dl.styled-dl {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0.5rem 1.5rem;
}

dl.styled-dl dt {
  font-weight: bold;
  color: #2c3e50;
  grid-column-start: 1;
}

dl.styled-dl dd {
  margin: 0;
  grid-column-start: 2;
}

/* Responsive Lists */
@media (max-width: 768px) {
  ul.responsive-list {
    padding-left: 1rem;
  }
  
  ul.horizontal-list {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Animated List Items */
ul.animated-list li {
  transition: all 0.3s ease;
}

ul.animated-list li:hover {
  background-color: #e3f2fd;
  padding-left: 1.5rem;
}

/* List with Icons */
ul.icon-list {
  list-style-type: none;
  padding-left: 0;
}

ul.icon-list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

ul.icon-list li::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 0.75rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

ul.icon-list .icon-user::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

ul.icon-list .icon-email::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>');
}

ul.icon-list .icon-phone::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/></svg>');
}

List Styles in Detail

Unordered List Styles

Unordered lists can use various bullet styles or custom images to visually organize content.

disc (default)

circle

square

custom image

Ordered List Styles

Ordered lists support various numbering systems for different contexts and languages.

decimal - 1, 2, 3, 4

decimal-leading-zero - 01, 02, 03, 04

lower-roman - i, ii, iii, iv

upper-roman - I, II, III, IV

lower-alpha - a, b, c, d

List Marker Positioning

Control whether list markers appear inside or outside the content flow, affecting text wrapping behavior.

outside - Marker is outside the content (default)

inside - Marker is inside the content flow

CSS Counters

CSS counters allow for advanced numbering systems and custom formatting beyond standard list styles.

counter-reset - Creates or resets a counter

counter-increment - Increases a counter value

counter() - Displays the counter value

Best Practices for CSS Lists

Readability & Usability

Choose appropriate list types for your content
Maintain consistent spacing between list items
Use custom bullets that align with your design system
Ensure sufficient contrast between text and background
Consider line height for multi-line list items

Common Mistakes to Avoid

Using inappropriate list types for content
Overly complex custom bullet designs
Inconsistent spacing and alignment
Not testing list styles across browsers
Using images for bullets without fallbacks

Accessibility Considerations

Use semantic HTML list elements
Ensure custom bullets have sufficient contrast
Don't rely solely on color to convey meaning
Test with screen readers for proper announcement
Provide text alternatives for image-based bullets

Ready to Try CSS Lists?

Experiment with different CSS list techniques in our interactive editor. See how each method works and practice implementing them in your projects.

< Previous Next >