YogeshChauhan.com
How to Make CSS Lists Bullets Smaller?
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

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 5 How to create flickering text using CSS? Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress?

You might also like these

How to check if radio button is checked or not using JavaScript?JavaScriptAngular 9 time clock update every minute, second, hourAngularHow to Find the Highest (or Lowest) Number in an Array in JavaScript?JavaScriptHow to Validate User Name, Email Address and URL in PHP?PHPinclude, include_once, require, require_once in PHPPHPWhat is Object Mutability in JavaScript?JavaScriptHow to animate list items using CSS and JavaScript?CSSWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscForcing the domain to serve securely using HTTPSMiscCan we execute conditions in SQL?SQL/MySQLKanban vs Scrum: The two frameworks of agile principlesMiscIntroduction to components and templates Part 2: Templates and viewsAngular