CSS How to Display a Plus Sign (+) in a

• List Style

In this article, we’ll explain how to display a plus sign (+) in a <li> list style.

Read more: CSS Tutorial

Using the ::before pseudo-element

You can use the ::before pseudo-element to add a plus sign (+) icon. Set the content property to the plus sign (+) character, and then adjust the position and style using style settings.

li::before {
content: "+";
display: inline-block;
padding-right: 5px;
} 

In the code above, we use the ::before pseudo-element to add a plus sign (+) character and display it before the list item content by setting the display property to inline-block. We also set the padding-right property to adjust the spacing between the plus sign and the list item content.

Here’s an example:

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

After applying the above CSS styles, the list items will appear as shown below:

• • List Item 1
• • List Item 2
• • List Item 3

Using a Custom Icon Font

Instead of using the plus sign character, we can also use the plus sign icon from a custom icon font to achieve the same effect.

First, we need to include our custom icon font. This can be achieved by using the @font-face rule and importing the font file from a third-party service.

@font-face { 
font-family: "Custom Icons"; 
src: url("path/to/custom-icons.woff") format("woff"); 
}

li::before {
font-family: "Custom Icons";
content: "02B";
}

In the code above, we use a custom icon font, where the plus sign icon has the Unicode encoding 02B. By setting the content property to this Unicode encoding, we can display the plus sign icon in the pseudo-element.

Here’s an example:

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

After applying the above CSS styles, the list items will appear as shown below:

• ⨁ List Item 1
• ⨁ List Item 2
• ⨁ List Item 3

Using Background Images

Another way is to use a background image to display the plus sign (+) icon.

First, we need to prepare a background image file containing the plus sign (+) image.

li {
background-image: url("path/to/plus-icon.png");
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}

In the above code, we use the background-image property to set the plus sign image as the background image for the list item. By setting the background-position property to left center, we position the plus sign image to the left of the list item and center it. We also set the background-repeat property to no-repeat to prevent the image from repeating. Finally, we adjust the list item’s left padding (padding-left) to make room for the plus sign image.

Here is an example:

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

After applying the above CSS styles, the list items will appear as shown below:

• [Plus Sign Image] List Item 1
• [Plus Sign Image] List Item 2
• [Plus Sign Image] List Item 3

Summary

By using the pseudo-element ::before, custom icon fonts, or background https://coder-cafe.com/wp-content/uploads/2025/09/images, we can <li> Displays a plus sign (+) icon within a list view. Choose the appropriate method to achieve the desired effect based on your specific needs and design. Regardless of which method you choose, you can customize the plus sign icon display by adjusting the style and layout.