Yogesh Chauhan's Blog

How to Make CSS Lists Bullets Smaller?

in CSS on August 7, 2020

Solution:


ul {
  list-style: none;
}

ul li:before {
  content: "•";
  font-size: 10pt;
}

Explanation

CSS list-style Property

The list-style property is a shorthand for list-style-type, list-style-position and list-style-image.

Where

list-style-type: Specifies the type of list-item marker. Default value is "disc"

list-style-position: Specifies where to place the list-item marker. Default value is "outside"

list-style-image: Specifies the type of list-item marker. Default value is "none"

Example


ul {
  list-style: square inside url("abc.gif");
}

CSS ::before Selector

The ::before selector inserts something before the content of each selected element(s).

Finally, we can use the content property to specify the content to insert.

Sources


amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
How to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQLWhat are Class Constants in PHP?PHPHow to create bouncing balls using HTML canvas and JavaScript?HTMLHow to check if checkbox is checked or not using JavaScript?JavaScriptHow to change style of all direct children of an element using jQuery?jQueryAngular: Templates, directives, data binding, Services and dependency injectionAngularWhat is the difference between float and double?MiscellaneousA list of wp-cli commands to use via SSHWordPressThe 8 Golden Rules of Programming I Have Learned in My CareerMiscellaneousSimple Page Hit Counter in PHPPHPHow to get ACF values from custom post type?WordPressHow to create a sticky menu pin using CSS?CSS