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 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

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
A complete guide to add responsive YouTube videos using HTML and CSSCSSHow to enable and disable button using JavaScript?JavaScriptHow to create a Random Hex Color generator using JavaScript?JavaScriptSpecificity of attribute selectorsCSSDid you get an error while displaying Special Characters in JavaScript?JavaScriptCSS align-items property examplesCSSRendering Elements in ReactReactDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressSolution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”MiscellaneousThe difference between 400(4xx) and 500(5xx) errorsMiscellaneousWhat is the best way to add JavaScript Code into HTML?HTML5 Steps to Create a Line using Canvas Tag in HTML5HTML