Change unordered list style using CSS on your website

Unordered lists show just a few black dots by default. You can change ul bullet style using CSS.

A good-looking UI can make your conversion rate higher. I'm discussing here the process of modifying the unordered list style, which can make a good user experience.

Different ways to make an unordered list look nice

1: By using a span tag

Using Span tag - You can modify li bullet by placing span inside li tag

CSS:

ul li {
  color: blue;
}
ul li span {
  color: red;
}

HTML:

<ul>
  <li><span>List style 1</span></li>
  <li><span>List style 2</span></li>
  <li><span>List style 3</span></li>
</ul>

Result:

2: By using FontAwesome class

Using FontAwesome class - Place i tag just inside li and define FontAwesome class. 

CSS:

ul li {
  color: black;
  list-style:none;
}
ul li i{
  color: red;
}

HTML:

<ul>
  <li><i class="fa fa-hand-o-right"></i> List style 1</li>
  <li><i class="fa fa-hand-o-right"></i> List style 2</li>
  <li> <i class="fa fa-hand-o-right"></i> List style 3</li>
</ul>

Result:

3: By adding before content

By setting before content - You can do it in hugely different ways. I just mention here a few processes. 

Process 1:

The unordered list bullet is set by default and you can alter it with many other signs by assigning content value.

CSS:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding-left: 1em; 
  text-indent: -.7em;
}
li::before {
  content: "• ";
  color: red; 
}

HTML:

<ul>
  <li> List style 1</li>
  <li> List style 2</li>
  <li> List style 3</li>
</ul>

Result:

Note: You can remove the extra space in "• " --> "•" and add: padding-right:10px; on it. The code will be like this:

li::before {
content: "•";
padding-right:10px; 
color: red;
}

You can use "■" also.

Result:

Process 2:

You can use instead "\002022" or similar like many others.

li::before {
  content: "\002222";
  padding-right:10px; 
  color: red; 
} 

Result:

Process 3:

You can use Fontawesome font as content value. This font really looks awesome. 

li:before {
    content: "\f02d";
    font-family: FontAwesome;
    color: red;
    margin-right: 4px;
}

Result:

Process 4:

You can use the Webdings font family to style your Unordered list. The content value should be only numerical here. The different number shows different styles.

CSS:

li::before {
  content: "8"; 
  padding-right:10px; 
  font-family:"Webdings"; 
  color: blue; 
}

Result:

4: Advance custom style

More Advance custom style - This is the best method I think. Because here you can apply your thinking and creativity as well.

ul{ 		
  list-style-type: none; 
}
ul li:before {
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 1px;
  height: 10px;
  width: 10px;
}

If you want to allow the responsiveness of your designs, then use em unit.

ul {
    list-style: none;
    line-height: 1em;
    font-size: 1.5em;
}
ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

Result:

Tip: Use vendor prefix for specific browser if not working well. 

There are a few more ways to modify the unordered list-style bullets. But mentioned methods are more than enough to design ul. I personally like the last method and I implemented it in my page design. 

Similar posts you may also like:

HTML hr Tag: Change design of horizontal line using CSS