Are you using unordered or ordered List Styles in your Pages or Blog-posts?
Unordered List
To create a list marked with bullets (an unordered list, UL), use the <ul> tag:
- Enclosed above, beneath, before, behind
- In green uncertainty, from which a shark
- At any time may dash
- And doom you like some huge demonic fate…
[sourcecode language=”plain”]<ul class="list">
<li class="list-item one">Enclosed above, beneath, before, behind</li>
<li class="list-item two">In green uncertainty, from which a shark</li>
<li class="list-item three">At any time may dash</li>
<li class="list-item four">And doom you like some huge demonic fate…</li>
</ul>[/sourcecode]
By default, your list marker will look like a small disc. You can change the way it looks and set different list item markers by applying the list-style-type property to the list. By way of illustration, we’ll apply this rule to the each individual element inside their parent:
[sourcecode language=”plain”]<ul class="list">
.one { list-style-type: disc; }
.two { list-style-type: circle; }
.three { list-style-type: square; }
.four { list-style-type: none; }
[/sourcecode]
Custom Bullets
You can also specify your own markers, such as “—”, “+”, “*”, “→”, “????”, “????”, etc.:
[sourcecode language=”plain”]<ul class="list">
ul {
list-style-type: "*";
}
[/sourcecode]
[sourcecode language=”plain”]<ul class="list">
li.heart::before, li.heart::after {
content: "";
position: absolute;
left: 7px;
top: 5px;
width: 7px;
height: 12px;
background: #f9dd94;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
li.heart::after {
content: "";
position: absolute;
top: 5px;
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
[/sourcecode]
Here’s another solution if you want to use more options like positioning of the marker:
[sourcecode language=”plain”]<ul class="list">
ul li {
list-style: none;
position: relative;
padding: 3px 0 2px 25px;
}
ul li::before {
content: ‘*’;
position: absolute;
top: 6px;
left: 0;
}
[/sourcecode]
Which will be shown like this:
- Line One
- Line Two Your Text here
- Line Three Your Text here
- Line Four Your Text here
Here are more examples of custom bullets in square, triangular, arrow, heart, diamond and other shapes: