CSS ::marker Explained
CSS ::marker Detailed explanation
in ::marker pseudo-element is used to set the marker style before the list item. It allows developers to customize the marker style of the list item to achieve special list style requirements. In this article, we will explain the usage and examples of the ::marker pseudo-element in detail.
Grammar
::markerThe syntax of the pseudo-element is as follows:
::marker {
/* style attributes */
}
In the ::marker pseudo-element, the style attributes that can be set include color, content, font-family, font-size, font-style, font-variant, font-weight, line-height, list-style, list-style-image, list-style-position, list-style-type, text-align, etc.
Example
Example 1: Changing the Marker Color and Size of List Items
<!DOCTYPE html>
<html Tutorial">html>
<head>
<style>
ul::marker {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</body>
</html>
In the example above, we use the ::marker pseudo-element to set the marker color of the unordered list to red and the font size to 20px. The running results are as follows:
- Apple
- Banana
- Orange
Example 2: Customizing the Markup Style of an Ordered List
<!DOCTYPE html>
<html>
<head>
<style>
ol::marker {
content: " "; /* Use emoticons as markers */
color: blue;
}
</style>
</head>
<body>
<ol>
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ol>
</body>
</html>
In the example above, we use the ::marker pseudo-element to set the marker content of the ordered list to a star emoji and set the color to blue. The results are as follows:
- Task 1
- Task 2
- Task 3
Example 3: Hiding the list marker
<!DOCTYPE html>
<html>
<head>
<style>
ul.no-marker {
list-style-type: none;
}
ul.no-marker li::marker {
display: none;
}
</style>
</head>
<body>
<ul class="no-marker">
<li>First item</li>
<li>Second item</li>
<li>Third Item</li>
</ul>
</body>
</html>
In the above example, we first use list-style-type: none to hide the default marker of an unordered list. Then, we use li::marker {display: none;} to hide the ::marker pseudo-element, thereby hiding the list marker. The running results are as follows:
- First Item
- Second Item
- Third Item
Summary
Through this article, we learned about the usage and examples of the ::marker pseudo-element. Developers can flexibly use the ::marker pseudo-element to customize the list marker style according to their needs, thereby achieving more personalized design effects.