How to reduce bullet size of unordered list using css

Reduce bullet size of unordered list, or increase the bullet size, There are possibly more than one solution, from the two solutions first method is controlling it by CSS, and the other method is inserting a background image in place of bullet.

Steps to Reduce bullet size of unordered list using css

I have implemented the first solution, firstly i have reduced the size of the list items to 0.75em, so that it reduces the size of the bullet or square, this method reduces the size of the text too. next, i have increased the size of text by adding css styles. this can be achieved by adding an inline tag.

I have applied span tag after the li, and increase the size of the text to 1.333em, so that it reduces the bullet size and keeps the text size as normal.

Another way to achieve is this by using a background image for the unordered list.

Here is the html code:

<ul>
<li><span>list 1</span></li>
<li><span>list 2</span></li>
<li><span>list 3</span></li>
<li><span>list 4</span></li>
<ul>

Here is the css code:

ul li{
font-size: 0.75em;
}
ul li span{
font-size: 1.333em;
}

The next method to Reduce bullet size of unordered list using css is by adding the background image in list items. Create a bullet of size you need (in Photoshop) and place it as background image from the css.

Incoming search terms:

  • css bullet size
Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe