¿Alguna vez ha querido sangrar la segunda línea de un elemento de lista en lugar de que aparezca directamente debajo del punto de viñeta? Esta es probablemente la razón por la que está aquí y a continuación es probablemente el resultado que está buscando:
Hoy vamos a mostrarles una manera fácil de hacer esto.
La razón por la que esto sucede es que la marca de verificación es contenido en línea, por lo que cuando el texto se ajusta, continuará fluyendo como de costumbre.
Puede detener este comportamiento aprovechando text-indent:
La propiedad text-indent especifica cuánto espacio horizontal debe dejarse antes del comienzo de la primera línea del contenido de texto de un elemento.
Al proporcionar una sangría de texto negativa, puede indicar a la primera línea que cambie la cantidad deseada a la izquierda. Si luego especifica un relleno positivo a la izquierda, puede cancelar este desplazamiento.
En el siguiente ejemplo, un valor de 20px:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }Y ahí lo tienen, aquí hay un CodePen de lo anterior en acción.