Tengo una estructura simple que representa a los padres de la navegación actual (como migas de pan).
ul { list-style: none; padding: 0; margin: 0; } ul > li { padding: 0; margin: 0; display: flex; } ul > li ~ li:before { content: '⤷'; display: inline-block; padding: 0 5px; } /* I want to make this part dynamic to cover an infinite amount of child nodes: */ ul > li ~ li ~ li { padding-left: 20px; } ul > li ~ li ~ li ~ li { padding-left: 40px; } ul > li ~ li ~ li ~ li ~ li { padding-left: 60px; } <ul> <li>Parent #1</li> <li>One more parent</li> <li>Another parent</li> <li>A very long item with potential page break,<br /> br tag just used as an example</li> <li>Current item</li> </ul>¿Cómo puedo hacer que el relleno izquierdo de cada hermano li sea 20 px adicional en comparación con el hermano anterior? No puedo cambiar el html y no puedo usar javascript.
Editar: el texto del elemento puede tener una o más líneas (salto de palabra automático, si el tema es demasiado largo). Modifiqué el ejemplo para cubrir el caso en el que se produce un salto de línea.
Usar float: left;
ul { list-style: none; padding: 0; margin: 0; } ul > li { padding: 0; margin: 0; } ul > li:before { content: '⤷'; display: inline-block; padding: 0 5px; float: left; } <ul> <li>Parent #1</li> <li>One more parent</li> <li>Another parent</li> <li>Current item</li> <li>Another item</li> <li>Another item</li> <li>Another item</li> <li>Another item</li> <li>Another item</li> <li>Another item</li> </ul>Puede usar un contador, usando el sistema "simbólico".
En el fragmento, he usado un símbolo visible para mostrar cómo funciona.
Reemplace esto con un símbolo Unicode que sea equivalente a un espacio en blanco, y lo tendrá funcionando.
@counter-style pad { system: symbolic; symbols:" "; /* unicode U+2003 */ suffix: " "; } ul { list-style: none; padding: 0; margin: 0; counter-reset: section; } ul > li { padding: 0; margin: 0; display: flex; } ul > li:nth-child(even):before { counter-increment: section; content: counter(section, pad) '⤷'; display: inline-block; padding: 0 5px 0 0; font-size: 20px; } ul > li:nth-child(1):before { padding: 0px 5px 0px 20px; content: '⤷'; display: inline-block; } ul > li:nth-child(3):before { padding: 0px 5px 0px 40px; content: '⤷'; display: inline-block; } ul > li:nth-child(5):before { padding: 0px 5px 0px 60px; content: '⤷'; display: inline-block; } ul > li:nth-child(7):before { padding: 0px 5px 0px 80px; content: '⤷'; display: inline-block; } ul > li:nth-child(9):before { padding: 0px 5px 0px 100px; content: '⤷'; display: inline-block; } <ul> <li>Parent #1</li> <li>Parent #1</li> <li>One more parent</li> <li>One more parent</li> <li>Another parent</li> <li>Another parent</li> <li>A very long item with potential page break,<br /> br tag just used as an example</li> <li>A very long item with potential page break,<br /> br tag just used as an example</li> <li>Current item</li> <li>Current item</li> </ul>Otra posibilidad es usar espacios como símbolo y establecer 'whitespace: pre' en el pseudo before:
@counter-style pad { system: symbolic; symbols: ' '; suffix: " "; } ul { list-style: none; padding: 0; margin: 0; counter-reset: section; } ul > li { padding: 0; margin: 0; display: flex; } ul > li ~ li:before { counter-increment: section; content: counter(section, pad) ' ⤷'; white-space: pre; display: inline-block; padding: 0 5px; } <ul> <li>Parent #1</li> <li>One more parent</li> <li>Another parent</li> <li>A very long item with potential page break,<br /> br tag just used as an example</li> <li>Current item</li> </ul>Dado que el aviso de recompensa menciona:
Si no se puede hacer con las funciones CSS actuales, infórmeme sobre los borradores actuales o las próximas funciones.
Me gustaría mencionar que hay una solicitud de función para habilitar el uso de counter() dentro de calc() que también se menciona en los borradores . Si se implementa, lo siguiente funcionaría:
ul { padding: 0; margin: 0; counter-reset: child-counter; } ul li { display: flex; gap: .5em; counter-increment: child-counter; } ul li:nth-child(n + 2)::before { content: "⤷"; /* this won't work now but may be in the future */ margin-left: calc(1em * counter-value(child-counter)); } ul li:nth-child(n + 2)::after { content: "(counter = " counter(child-counter) ")" } <ul> <li>Parent #1</li> <li>One more parent</li> <li>Another parent</li> <li>A very long item with potential page break,<br /> br tag just used as an example</li> <li>Current item</li> </ul>