Uso el icono de fuente impresionante para poner la flecha en ángulo recto, pero ¿cómo configuro el mismo tamaño verticalmente en CSS?

Aquí está mi código HTML: -

    <div class="list">
         <ul>
             <li>JAVA Developer<i class="fas fa-angle-right"></i></li>
             <li>Python Developer<i class="fas fa-angle-right"></i></li>
             <li>UX Designer<i class="fas fa-angle-right"></i></li>
         </ul>
    </div>

Mi ejemplo de demostración: - ingrese la descripción de la imagen aquí

css
-1
devanshi 25 jun. 2020 a las 22:18

2 respuestas

La mejor respuesta
li{    
   position: relative;
}
li i{
   position: absolute;
   right: 65%;
}
0
devanshi 8 jul. 2020 a las 18:20

Puede usar una multitud de soluciones aquí, voy a mostrar una solución basada en un ancho fijo y un posicionamiento absoluto para los iconos:

.list ul li {
  position: relative;
  padding-right: 1.5em;
  width: 8em;
}

.list ul li i {
  position: absolute;
  right: 0;
}
<div class="list">
  <ul>
    <li>JAVA Developer<i class="fas fa-angle-right">></i></li>
    <li>Python Developer<i class="fas fa-angle-right">></i></li>
    <li>UX Designer<i class="fas fa-angle-right">></i></li>
  </ul>
</div>
0
connexo 25 jun. 2020 a las 19:41