1 min read

Styling Lists

The following videos describe how to use CSS to change the default styles and layout for an HTML list.

Step 1

Removing the default bullets/numbering and spacing from an HTML list.

Before

An unordered list with default styling, including bullets.

After

An unordered list without bullets.

Step 2

Making an HTML list display horizontally.

Before

An unordered list without bullets.

After

A horizontal list of items with dividers between them.

Step 3

Additional styles on a horizontal list, including hover effects for the following:

  • border styles
  • SVGs

Before

An unordered list of links with default styling, including bullets.

After

A list with background colors, icons and hover effects.

Make this page better.

Found something that's incorrect or confusing on this page? Broken link? I want to know! Open an issue on GitHub to tell me what's up and help me update the page.