En este artículo, veremos cómo crear una lista desordenada con viñetas cuadradas usando HTML . Para crear una lista desordenada con viñetas cuadradas, usaremos CSS list-style-type: propiedad cuadrada.
La propiedad list-style-type en CSS especifica la apariencia del marcador de elementos de la lista (como un disco, un carácter o un estilo de contador personalizado).
Sintaxis:
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman| lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none| inherit;
Enfoque: en el siguiente ejemplo, crearemos una lista desordenada de elementos usando las etiquetas <ul> y <li> y agregaremos CSS list-style-type: square style en el elemento <ul> para crear viñetas cuadradas.
Ejemplo:
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>
Producción: