YogeshChauhan . com

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Clearwater Seafoods – B2C in ChinaMiscHow to change style of all direct children of an element using jQuery?jQueryWhat is Hoisting in JavaScript?JavaScriptRelative Length Units in CSSCSS3 ways to pass a variable in url() function in SCSS (Sass)SCSSHow to change perception and behavior of a person for acceptance of new systems?Miscsubstring() Method in JavaScriptJavaScriptSQL ANY OperatorSQL/MySQL3 Common Usability Mistakes In Web DesignUI/UXHow to get the first element with a class name xyz using JavaScript?JavaScriptWhat is HTMLUnknownElement?HTMLUnary Operators in JavaScriptJavaScript