CSS Custom Bullet Points | Style List Items Marker

The custom bullet points or custom maker for list items can be defined or created using CSS with the help of the following CSS properties:

list-style-type: used to define the type of list marker.
list-style-position: used to define the position of the list marker.
list-style-image: used to define or set an image as the marker of list items.
list-style: used as shorthand for all the above three properties.

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{list-style: url("images/fingerToRight.JPG");}
   </style>
</head>
<body>

   <h2>The three most used web developing languages are:</h2>
   <ul>
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>
   
</body>
</html>

Output

The three most used web developing languages are:

CSS
HTML
JS

In the above example, I defined a CSS style for an unordered list (ul) element and employed the list-style property to set an image as the list's bullet point.

The list-style property is set to url("images/fingerToRight.JPG"), which specifies the path to an image file (fingerToRight.JPG) that will be used as the list's bullet point. The url() function is used to specify the image file's location.

The HTML code's ul element contains three list items (li) that represent the three most popular web development languages: CSS, HTML, and JS. Because the ul element has the list-style property set, each of these list items will have a bullet point to the left, resembling the fingerToRight.JPG image.

The h2 element above the list acts as the list's heading, but it is unaffected by the list-style property because it is not part of the ul element.

Before closing the discussion on how to create custom bullet points using CSS, I'm willing to include another example. So here is the example that demonstrates the custom bullet points using CSS.

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style: none;     /* Removes default bullet points */
      }
      li::before {
        content: "\2022";     /* Bullet point character */
        color: #009688;       /* Color of bullet point */
        font-weight: bold;    /* Bold font weight */
        margin-right: 8px;    /* Spacing between bullet point and text */
      }
    </style>
  </head>
  <body>
  
    <h2>Top 5 Destinations</h2>
    <ul>
      <li>Paris</li>
      <li>New York</li>
      <li>Tokyo</li>
      <li>Sydney</li>
      <li>Rome</li>
    </ul>
    
  </body>
</html>

The output that this program produces is shown in the snapshot given below:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!