10 Stylish Bulleted List (ul/li) Designs: Copy-and-Paste CSS

This post was automatically translated by AI from the Japanese original. The screenshots are in Japanese.

Bulleted lists show up all the time when you write blog posts.
They’re handy for lining up items or summing things up, and I use them a lot too.

In this post I’ll show you stylish list designs you can make with copy-and-paste CSS.

Choose a color and a shape to make the code#

Choose your favorite color and design, and you’ll get CSS ready to copy and paste.
If you’d rather get started than browse the samples, start here.

Turn on JavaScript to choose a color and a shape and get the code. You can also copy the sample code below.

The basics of writing a list#

There are two kinds of lists: “numbered” and “unnumbered.”

Unnumbered list

Strawberry
Apple
Orange

Numbered list

First
Second
Third

When you make a list, it’s better to use the proper tags than to type “1. ” or “2.” by hand, or to use a bullet character such as ”•”.

For more on how to use the tags, see Saruwaka’s “How to make bulleted lists in HTML: ul, ol and li tags” (in Japanese).

The samples that follow are all designed on top of this HTML.
[Unnumbered list]

1
<ul>
2
    <li>Apple</li>
3
    <li>Strawberry</li>
4
    <li>Orange</li>
5
</ul>

[Numbered list]

1
<ol>
2
    <li>First</li>
3
    <li>Second</li>
4
    <li>Third</li>
5
</ol>

10 stylish list designs in CSS#

#1 List with a rounded frame#

List with a rounded frame (in Japanese)

[CSS for the unnumbered list]

1
ul{
2
    margin: 1rem 0; /* space outside the frame */
3
    padding: 1rem 1.5rem; /* space from the frame to the text */
4
    color:#AAA; /* text color */
5
    border: solid 1px #D3D6Db; /* put a frame around the list */
6
    border-radius:10px; /* round the corners of the frame */
7
}
8
ul li{
9
    list-style:none; /* remove the default list style */
10
}
11
ul li::before {
12
    content: '＊'; /* use ＊ as the list marker */
13
    color: #EEB1C0; /* make the marker pink */
14
    padding-right: 5px;/* space between the marker and the text */
15
}

[CSS for the numbered list]

1
ol{
2
    margin: 1rem 0; /* space outside the frame */
3
    padding: 1rem 1.5rem; /* space from the frame to the text */
4
    border: solid 1px #D3D6DB; /* put a frame around the list */
5
    border-radius:10px; /* round the corners of the frame */
6
}
7
ol li{
8
    list-style-type: none;
9
    counter-increment: number; /* count up by one on every line */
10
}
11
ol li::before {
12
    content: counter(number) "."; /* put a period after the number */
13
    margin-right: 5px; /* space between the number and the text */
14
    color: #EEB1C0; /* make the number pink */
15
}

border: line style, line thickness, color border-radius: roundness of the corners (0px makes them square) If you don't want a frame, delete the `border: …` line and the `border-radius: …` line.

I think adding color to the list markers is cute.

#2 List with a background color#

List with a background color (in Japanese)

[CSS for the unnumbered list]

1
ul{
2
    margin: 1rem 0; /* space outside the frame */
3
    padding: 1rem 1.5rem; /* space from the frame line to the text */
4
    color:#555; /* text color */
5
    background:#FDF2F3; /* background color */
6
    border: solid 1px #F198A4; /* frame line */
7
    border-radius:10px; /* round the frame */
8
}
9
ul li{
10
    list-style:none; /* remove the default list style */
11
}
12
ul li:before {
13
    content: '＊'; /* use ＊ as the list marker */
14
    color: #F198A4; /* marker color */
15
    padding-right: 5px; /* space between the marker and the text */
16
}

[CSS for the numbered list]

1
ol{
2
    margin: 1rem 0; /* space outside the frame */
3
    padding: 1rem 1.5rem; /* space from the frame line to the text */
4
    color:#555; /* text color */
5
    background:#FDF2F3; /* background color */
6
    border: solid 1px #F198A4; /* frame line */
7
    border-radius:10px; /* round the frame */
8
}
9
ol li{
10
    list-style-type: none;
11
    counter-increment: number;
12
}
13
ol li:before {
14
    content: counter(number) ".";
15
    margin-right: 5px; /* space between the number and the text */
16
    color: #F198A4; /* number color */
17
}

#3 A title on the frame is cute too#

List with a titled frame (in Japanese)

In the HTML, the list is wrapped in a <div> block, and the frame line is set on that.

1
<div class="list3">
2
    <span class="title">List with a title (ol)</span>
3
    <ol>
4
        <li>First</li>
5
        <li>Second</li>
6
        <li>Third</li>
7
    </ol>
8
</div>
9
<div class="list3">
10
    <span class="title">List with a title (ul)</span>
11
    <ul>
12
        <li>Apple</li>
13
        <li>Strawberry</li>
14
        <li>Orange</li>
15
    </ul>
16
</div>

[CSS for the unnumbered list]

1
.list3 {
2
    position: relative;
3
    margin: 2rem auto;
4
    border: solid 1px #9CA5AA;
5
    border-radius:5px;
6
}
7
.list3 .title{
8
    position: absolute;
9
    display: inline-block;
10
    top: -13px;
11
    left: 10px;
12
    padding: 0 0.5rem;
13
    background: #FFF;
14
    font-size:0.9rem;
15
    color: #F3A7A9;
16
}
17
.list3 ul{
18
    color:#9CA5AA;
19
    padding:0px 1rem;
20
}
21
.list3 ul li{
22
    list-style: none;
23
}
24
.list3 ul li:before{
25
    color:#F3A7A9;
26
    content:"❤︎ "
27
}

[CSS for the numbered list]

1
.list3 ol{
2
    color:#9CA5AA;
3
    padding:0px 1rem;
4
    list-style-type: none;
5
    counter-reset:number;
6
}
7
.list3 ol li:before{
8
    color:#F3A7A9;
9
    content: counter(number)". ";
10
    counter-increment: number;
11
}

#4 A list that looks like Post-it notes#

List that looks like Post-it notes (in Japanese)

[CSS for the unnumbered list]

1
ul{
2
    padding:0px 1rem;
3
    list-style: none;
4
}
5
ul li{
6
    background:#F9E9Df;
7
    color:#F3A7A9;
8
    border:1px dashed #F3A7A9;
9
    margin:3px 0px;
10
    padding:5px 10px;
11
}
12
ul li:before{
13
    color:#F3A7A9;
14
    content:"● ";
15
}

[CSS for the numbered list]

1
ol{
2
    padding:0px 1rem;
3
    list-style-type: none;
4
    counter-reset:number;
5
}
6
ol li{
7
    background:#F3A7A9;
8
    color:#FFFFFF;
9
    margin:3px 0px;
10
    padding:5px 10px;
11
}
12
ol li:before{
13
    color:#FFFFFF;
14
    content : "0" counter(number) " |";
15
    counter-increment: number;
16
    margin-right:10px;
17
}

#5 Numbered list with circles#

Numbered list with circles (in Japanese)

[CSS]

1
ol{
2
    margin: 1rem 0;
3
    padding: 1rem;
4
    list-style-type: none;
5
    counter-reset:number;
6
}
7
ol li{
8
    color:#fe94af;
9
    margin:0 0 10px 0;
10
}
11
ol li:before{
12
    content : counter(number);
13
    counter-increment: number;
14
    color:#FFFFFF;
15
    width:30px;
16
    height:30px;
17
    padding:6px 8px;
18
    text-align:center;
19
    margin-right:5px;
20
    background:#fe94af;
21
    border-radius:50%;
22
}

#6 List with square frames#

List with square frames (in Japanese)

1
ol{
2
    margin: 1rem;
3
    padding: 0;
4
    list-style-type: none;
5
    counter-reset:number;
6
}
7
ol li{
8
    margin:5px 0px;
9
    position:relative;
10
    line-height:30px;
11
    border: 1px solid #EEB1C0;
12
    padding-left:40px;
13
}
14
ol li:before {
15
    counter-increment: number;
16
    content: counter(number);
17
    position: absolute;
18
    left:0;
19
    width:30px;
20
    height:30px;
21
    line-height:30px;
22
    margin-right:40px;
23
    text-align:center;
24
    color: #FFFFFF;
25
    background:#EEB1C0;
26
    border-right: 1px solid #EEB1C0;
27
}

#7 Changing the font of the numbers is stylish too#

Changing the font of the list numbers (in Japanese)

Let’s change the font of the numbers with a web font.

[CSS for the numbered list]

1
@import url('https://fonts.googleapis.com/css?family=Rochester');
2
ol{
3
    margin: 1rem 0;
4
    padding: 1rem 1.5rem;
5
    counter-reset:number;
6
    list-style-type: none;
7
}
8
ol li:before {
9
    font-family:'Rochester', cursive;
10
    font-size:20px;
11
    color: #139F6B;
12
    margin-right: 10px;
13
    counter-increment: number;
14
    content: counter(number) ".";
15
}

@import loads the Google font “Rochester”, and font-family sets the font name.

#8 List with lines between the items#

List with lines between the items (in Japanese)

[CSS for the unnumbered list]

1
ul{
2
    margin:1rem;
3
    padding:0rem;
4
    list-style-type:none;
5
    border-radius:5px;
6
}
7
ul li{
8
    line-height:1.6;
9
    padding:6px 0;
10
    margin:5px 0px;
11
}
12
ul li:not(:last-child){
13
    border-bottom:1px dashed #5AA0D6;
14
    margin-bottom:0;
15
}
16
ul li:before{
17
    content:'◆';
18
    padding:10px;
19
    font-weight:900;
20
    color:#5AA0D6;
21
}

#9 List with icons#

List with crown icons (in Japanese)

We’ll change the list style with a web icon set called Font Awesome.
Put the following code between <head> and </head> first, then set up the CSS.

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

[CSS for the list]

1
ul{
2
    margin:1rem;
3
    padding:0rem;
4
    list-style-type:none;
5
}
6
ul li{
7
    background:#FFFDE3;
8
    border:1px solid #FFDC00;
9
    border-radius:5px;
10
    line-height:2;
11
    margin:5px 0px;
12
}
13
ul li:before{
14
    font-family: "Font Awesome 5 Free";
15
    content:'\f521';
16
    padding:10px;
17
    font-weight:900;
18
    color:#FFDC00;
19
}

The “\f521” set in content is the code for the crown icon.
Pick any icon you like from the cheat sheet below and use its code.

https://fontawesome.com/v5/cheatsheet

#10 Turning the list marker into an icon#

List with gem icons (in Japanese)

Same as before: add Font Awesome first, then set up the CSS.

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

1
ul{
2
    margin:1rem;
3
    padding:0rem;
4
    list-style:none;
5
}
6
ul li:before{
7
    font-family: "Font Awesome 5 Free";
8
    content:'\f3a5';
9
    padding:10px;
10
    font-weight:400;
11
    color:#FCB2A9;
12
}

Summary#

Try decorating your pages with stylish list designs.