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


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

#Dec 4 What is Etrieve Flow? #Dec 2 The unique operator($) in Envision Basic #Nov 25 Steps to Install Microsoft SQL Server on a MacOS #Nov 11 What is DevOps? #Nov 10 The * arithmetic operator in Envision Basic #Nov 10 What are Big Data Clusters in SQL Server?
You might also like these
Difference between :where and :is in CSSCSSFETCH clause in PostgreSQLPostgresList of social media icon logo color codes in HEXMiscellaneousArray.from() Method in JavaScriptJavaScriptWhat is Hoisting in JavaScript?JavaScriptCreate a responsive image gallery using CSS gridCSSHow to remove border from :visited image, link or button?CSSHow to use @supports rule in CSS?CSSIs monitoring an employee’s work on a computer a desirable or undesirable activity?MiscellaneousHow to convert a function component into a class in React?ReactWordPress: How to print ACF array field values?WordPressHow to check if radio button is checked or not using JavaScript?JavaScript