CSS List Style

/ Blog

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: