Sangría francesa en CSS

Nunca se me había ocurrido como crear una sangría francesa en HTML+CSS, quizá porque no es un efecto muy usual en páginas web. Es muy sencillo. Pero antes una pequeña definición:

Una sangría francesa es un estilo de sangría de párrafo en la que la todas las líneas están indentadas excepto la primera. Es sobre todo útil para listados de elementos (donde no utilicemos topos) que se muestren en columnas estrechas (y hoy en día, con los móviles, cualquier texto puede mostrarse así) ya que si no es difícil diferenciar entre cuando es un elemento nuevo o cuando es la continuación del anterior. En inglés se le llama hanging indent.

Bueno, para lograrlo es facilísimo. Simplemente hay que utilizar el conocido text-indent con valor negativo:

p {
    margin-left: 2em;
    text-indent: -2em;
}

Aquí lo puedes ver en un codepen, donde se puede apreciar el efecto. Como se puede ver, en la lista con sangría francesa (a la izquierda) se diferencian perfectamente los distintos elementos, mientras que en la lista de la derecha se confunden unos con otros.

See the Pen PwVdmq by Juanjo Navarro (@juanjonavarro) on CodePen.