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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What is the best way to add JavaScript Code into HTML?HTMLSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneousWhat are Stored Procedures for SQL Server?SQL/MySQLHow to change CSS with JavaScript?CSSHow to CREATE TABLE in SQL with and without using Another Table?SQL/MySQLKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscellaneousDefault Values in SCSS (Sass)SCSSFor Each Loop in Swift for BeginnersSwiftHow to remove trailing characters from a string using JavaScript?JavaScriptWhat’s a Strict mode in JavaScript?JavaScriptHow To Create a Fullscreen Background Video using CSS and JavaScript?CSSA short basic guide on states in ReactReact