How to create an unordered list with square bullets in HTML ?
In this article, we will see how to create an unordered list with square bullets using HTML. To create an unordered list with square bullets, we will use CSS list-style-type: square property.
The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style).
Syntax:
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman| lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none| inherit;
Approach: In the below example, we will create an unordered list items using <ul> and <li> tags and add CSS list-style-type: square style on <ul> element to make square bullets.
Example:
HTML
<!DOCTYPE html><html lang="en"> <head> <title> How to create an unordered list with square bullets in HTML? </title></head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to create an unordered list <br>with square bullets in HTML? </h3> <p>Web Development Technologies - </p> <ul style="list-style-type:square"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ul></body> </html> |
Output:
Please Login to comment...