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…
<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>
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:
<ul class="list"> .one { list-style-type: disc; } .two { list-style-type: circle; } .three { list-style-type: square; } .four { list-style-type: none; }
Custom Bullets
You can also specify your own markers, such as “—”, “+”, “*”, “→”, “????”, “????”, etc.:
<ul class="list"> ul { list-style-type: "*"; }
<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%; }
Here’s another solution if you want to use more options like positioning of the marker:
<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; }
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: