Salto de línea (me gusta) usando solo css
¿Es posible en css puro, es decir sin agregar etiquetas html adicionales, hacer un salto de línea como <br>
? Quiero el salto de línea después del elemento <h4>
, pero no antes:
HTML
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
CSS
h4 {
display: inline;
}
He encontrado muchas preguntas como esta, pero siempre con respuestas como "use display: block;", que no puedo hacer, cuando el <h4>
debe permanecer en la misma línea.
74
3 answers
Funciona así:
h4 {
display:inline;
}
h4:after {
content:"\a";
white-space: pre;
}
Ejemplo: http://jsfiddle.net/Bb2d7/
El truco viene de aquí: https://stackoverflow.com/a/66000/509752 (para tener más explicación)
120
Author: adriantoine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:25:36
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:25:36
4
Author: Philip Kirkbride,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-07 14:30:24
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-07 14:30:24
Puede utilizar ::after
para crear un bloque 0px
-height después de <h4>
, que efectivamente mueve cualquier cosa después de <h4>
a la siguiente línea:
h4 {
display: inline;
}
h4::after {
content: "";
display: block;
}
<ul>
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
</ul>
2
Author: 0b10011,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-17 20:05:04
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-17 20:05:04