CSS List Style

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: