List Item

Designed to place within a List slot.

Properties

• Text. The text to display.

Nested List

• Show Slot. Makes the hidden slot for nested lists visible and accessible.

• Slot. Used for placing nested lists.

Variants

Consider slotted variant for semantic constructions.

Styling

Here’s what styling you can apply specifically to list items (<li>):

• Text styling:

  • color

  • font-size

  • font-weight

  • font-family

  • text-transform (uppercase, lowercase, capitalize)

  • text-decoration (underline, line-through, etc.)

  • line-height

  • letter-spacing

  • text-align

• Spacing and layout:

  • margin → space outside the list item

  • padding → space inside the list item

  • height / min-height / max-height

  • width / min-width / max-width

  • display → block, inline, flex, grid, etc.

  • gap → spacing between children if flex/grid

  • float / clear

• Background and borders:

  • background-color

  • background-image

  • border

  • border-radius

  • box-shadow

• Positioning:

  • position → relative, absolute, etc.

  • top, right, bottom, left

• Custom markers (modern browsers):

  • ::marker pseudo-element:

    • color

    • font-size

    • content (custom symbol or text)

    • font-family

Example:

cssCopyEditli {
  padding: 0.5em;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

li::marker {
  color: red;
  content: "→ ";
}

• Interactivity:

  • cursor

  • hover / focus styles

  • animations / transitions

Everything that applies to a block element can generally be applied to <li>. They’re flexible containers for any HTML content (text, images, divs, etc.).