¿Cómo decorar viñetas de lista en flecha usando CSS?

Dada una lista de elementos y la tarea es personalizar el estilo de viñeta de la lista y reemplazarlo con la flecha.

Método 1: por carácter Unicode

Primero, desactivaremos el estilo de viñeta predeterminado de la lista.
Luego, insertaremos Unicode del carácter de flecha en la propiedad de contenido en el selector «li::before» .

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Decorating Bullet Style</title>
  
    <!-- Internal css -->
    <style type="text/css">
          
        <!-- Element selected by id -->
        #list{
            color: green;
            background: white;
            font-size: 30px;
        }
  
        <!-- Removes default style of 
        bullet point -->
        li{
            list-style: none;
        }
  
        <!-- ::before creates a pseudo-element
        that is the first child of the 
        selected element -->
  
        li::before{
  
            <!-- Unicode for >> character -->
            content: "\00BB";
        }
    </style>
</head>
  
<body>
  
    <!-- list of elements -->
    <ul id="list">
        <li> Geeks</li>
        <li> for</li>
        <li> Geeks</li>
    </ul>
</body>
      
</html>

Producción:

Método 2:

Insertaremos la URL de la imagen que queremos insertar en lugar de los estilos de viñetas predeterminados en la propiedad «list-style-image» .

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Decorating Bullet Style</title>
  
    <!-- Internal css -->
    <style type="text/css">
          
        <!-- Element selected by id -->
        #list{
            color: green;
            width: 300px;
            font-size: 45px;
            font-family: sans-serif;
            border:2px solid black;
        }
  
        ul{
            margin: 100px 100px;
        }
  
        <!-- Adds desired image at the 
        in place of default bullets -->
        li{
            list-style-image:URL(
'https://media.geeksforgeeks.org/wp-content/uploads/20200331172037/image47.png');
            list-style-position: inside;
        }
    </style>
</head>
  
<body>
  
    <!-- list of elements -->
    <ul id="list">
        <li> Geeks</li>
        <li> for</li>
        <li> Geeks</li>
    </ul>
</body>
      
</html>

Producción:

Referencias:

Publicación traducida automáticamente

Artículo escrito por VIPULKRISHNAMATHURIA y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta