40 CSS List Style Examples
A carefully curated collection of the top free HTML and CSS list style code examples. These list style examples each contain unique designs, animations, effects, and colors that make them suitable for numerous web development applications.
Title:
CSS List Item Hover Effect
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An attractive CSS list style that has a minimal yet interesting shift effect upon hover. It was created using pure HTML and CSS.
Title:
Transform Skew Property And Nice List Styles
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This list style has a beautiful layout created using only HTML and CSS. When you hover over an item it will show the read more button with a smooth fade-in and sliding effect.
Title:
Checklist Animation — Only CSS
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This beautifully designed CSS list style checklist template is created with pure HTML and SCSS. When you click on any list item, it will strike through the item with a smooth animation effect.
Title:
CSS List Item Hover Effect
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Beautiful list style created with only HTML and CSS. Produces an animated slide-in effect with vibrant color upon hovering on the list items.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Forbes leaderboard CSS list style created using pure HTML and SCSS. When you hover on a list item, it will pop up a list item with a decent animation effect. It has also given a nice shadow to list items.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A leaderboard with a list style layout created using pure HTML and SCSS. It has a gradient background with the color orange and red. It looks amazing and decent. When you hover on the list item, it will show a pop-up effect
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple yet beautiful gradient ordered CSS list style layout created using HTML and SCSS. It looks decent with the shadow effects in each list item.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This to-do list style is one of a kind as it features a beautifully animated Terrarium. It was created using HTML, SCSS, and Javascript that blooms eventually as you complete your tasks
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A pure HTML and CSS list style that has a beautiful transition when a list item is hovered. Each list item field changes color and has a zoom-out effect on hover.
Title:
RemindMe App Concept(CSS Animations & Mobile)
Author:
Created on:
Made with:
HTML, SCSS, Javascript(Babel)
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This is a unique reminder list style created using HTML, SCSS, and Javascript that displays an animated timer and completion percentage of each list item. It also has speech commands and voice recognition that are done using Babel.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Pretty and useful checklist-style design beautifully created using only HTML and CSS. Changes the color of the field upon click.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An animated to-do list created with pure HTML and SCSS that changes color to light purple when you click on the to-do item and also changes its icon with a smooth animation effect when you click on it.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Highly functional minimalistic CSS list style. Provides in-list dropdown options created using HTML and CSS
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A lovely to-do list created using HTML, SCSS, and JavaScript, this vacation to-do list uses a fading-in effect to indicate that the box is marked when you click on the item.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This notepad CSS style list created using SCSS and Jquery actually gives you the feel of using a notepad with it’s amazing animations and styling.
Title:
Animation Loading Modules
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A CSS list style created in the form of a loading module. Creates a continuous animation of the prespecified list items with fade-in and fade-out effect that stops at the last item.
Title:
CSS-only Todo List Checkbox Animation
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An interactive to-do list that uses HTML, CSS(Less), and JavaScript. When you click on the checkbox of a list item, it will strike through the text with amazing animation.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Simple and very easy to customize list style. Created using pure HTML and CSS. Gives a highlighting effect upon hover.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple and delightful animated dropdown list style created with HTML, CSS, and jQuery. When you click the button, the button layout will change, and the list items will appear one by one, with a smooth dropdown effect.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A classic pricing table that contains a cool list style hover effect with a modern touch given using HTML and Bootstrap CSS. Upon hover, the list items smoothly change color and shift slightly.
Title:
UI Motion — Shipping Concept
Author:
Created on:
Made with:
HTML, SCSS, javascript(Babel)
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A super fun animated shipping CSS list style that uses some super cool animations upon click.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An elegant to-do list layout that incorporates HTML, CSS, and Vue.js for striking through text and animation effects when clicking on the list items. You can also delete them as well.
Title:
Interactive ToDo List Using HTML-CSS
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An interactive and modish to-do list that was created using HTML, SCSS, and Java Script. It has a decent look that can easily fit into a dark color scheme website. It lets you add and delete items
Title:
Advanced TimeLine: HTML/CSS/Javascript
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Modern and innovative timeline or milestone list style created using advanced javascript and CSS. Looks super sleek and provides collapse options.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A charismatic CSS list style created using HTML(Pug) and SCSS and jQuery. This list gives a beautiful and cicular scrolling effect to give a list 3D decent look. This type of list is suitable for displaying important updates on the website.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This app presents a beautiful CSS to-do list layout created using HTML, SCSS, and JavaScript. You can add items to the list, and it will also display the count of each item, along with a way to sort the items by completion.
Title:
Context menu with Feather icons
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This is a super minimal and useful CSS list-style. It is perfect for those who want to get things done quickly and efficiently. It has a descriptive toolbox type interface created using SCSS and Javascript.
Title:
Morphing Tab Button with List
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A compact CSS list style dropdoen menu from a morphing button created using HTML, SCSS, and jQuery. When you click on the button, a list of items appears with smooth sliding effects. When you hover over the list item it will highlight it with a fade-in white effect.
CSS Lists
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
Example
ol.c list-style-type: upper-roman;
>
ol.d list-style-type: lower-alpha;
>
Note: Some of the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
Position The List Item Markers
The list-style-position property specifies the position of the list-item markers (bullet points).
«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:
«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:
Example
ul.a <
list-style-position: outside;
>
ul.b list-style-position: inside;
>
Remove Default Settings
Example
List — Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
Example
When using the shorthand property, the order of the property values are:
- list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
- list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
- list-style-image (specifies an image as the list item marker)
If one of the property values above is missing, the default value for the missing property will be inserted, if any.
Styling List With Colors
We can also style lists with colors, to make them look a little more interesting.
- or
tag, affects the entire list, while properties added to the
tag will affect the individual list items:
Example
ol <
background: #ff9999;
padding: 20px;
>
ul background: #3399ff;
padding: 20px;
>
ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>
ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>
More Examples
Customized list with a red left border
This example demonstrates how to create a list with a red left border.
Full-width bordered list
This example demonstrates how to create a bordered list without bullets.
All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.
All CSS List Properties
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |