Recently, I implemented a custom unordered list style, and now I will talk to you about the problems I encountered. Hope this helps you avoid unnecessary CSS list styling mistakes.
The designer said that our custom unordered list item style needs to be optimized. The origin is too small, and the overall look is unsightly. The default unordered list style is as follows.
<style>
ul {
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
}
</style>
<ul>
<li>I am the first line. </li>
<li>You are the second line You are the second line You are the second line You are the second line You are the second line</li>
<li>Three</li>
</ul>
To that end, I looked into how to make the dots of a custom unordered list a bit bigger in CSS. In order to adjust the custom unordered list to the desired style, I have tried three approaches.
1. ::before: Customize Unordered List Styles with CSS
I first remove the original dots in li by adding list-style: none; to li. Then use ::before to create a pseudo-element in front of li with dot characters.
ul {
/* ... */
/* Slightly adjust the left margin of ul */
padding-inline-start: 20px;
}
li {
list-style: none;
}
li::before {
/* Add two whitespaces here as margins */
/* You can also use margin-right */
content: "\2022 ";
font-size: 22px;
}
Here I added two space characters to the end of the content value to achieve the right margin effect. You can also do it with margin-right, which is more formal. It should be noted that the value of content is best to use escape characters, not original characters. Because I found garbled characters in some browsers.
The dots weren't aligned horizontally to the text, so I tweaked the position with a transform. One thing to note is that transform has no effect on inline elements (display: inline). The ::before pseudo-element is an inline element by default and needs to be manually changed to inline-block. The complete writing is as follows.
ul {
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
padding-inline-start: 20px;
}
li {
list-style: none;
}
li::before {
content: "\2022 ";
display: inline-block;
font-size: 22px;
transform: translateY(3px);
}
Designers are happy with this. But after a few days, he realized that something was wrong. The starting position of the newline text should not be below the dot but should be aligned to the left of the first line of text. How to solve this problem?
2. ::before + Absolute Positioning: Customize Unordered List Styles with CSS
No problem, I can change it right away. I set the ::before pseudo-element to be absolutely positioned to keep the dots out of the normal document flow. This time we use left to adjust the position. The complete writing is as follows.
ul {
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
padding-inline-start: 40px;
}
li {
position: relative;
list-style: none;
}
li::before {
content: "\2022 ";
position: absolute;
left: -11px;
display: inline-block;
font-size: 22px;
}
The effect is perfect and the designer is very satisfied.
3.list-style-type and ::marker: Customize Unordered List Styles with CSS
If you don't need to change the dot size and want to replace it with other symbols, another way to write it is to use list-style-type or ::marker. list-style-type is used on ul elements.
ul {
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
padding-inline-start: 20px;
list-style-type: "\2708"; /* Airplane symbol */
}
Then we see that the origin becomes the airplane character.
In addition, ::marker is used on li elements, allowing different li to use different styles.
li::marker {
content: "\2708";
}
The more specific writing method will not be discussed here, and readers can read the official documents by themselves. But this scheme cannot use transform to adjust the position after modifying the size of the dot, so I didn't use this.
There are also many ways to customize the unordered list. Hope this article is useful to you.