|

CSS: inserir uma quebra de linha mantendo display: inline

Às vezes você deseja criar uma quebra de linha após um elemento inline, sem que seja necessário mudar o valor da propriedade display para outro valor. Felizmente, basta utilizar um truque com pseudo-elementos:

.inline-element::after {
  content: '\A';
  white-space: pre;
}

Isso é especialmente útil em formulários, como exemplificado no exemplo a seguir.

See the Pen Inline line break by Andy Bell (@andybelldesign) on CodePen.

Fonte: Picalilli.

Share Your Thoughts

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Recentes

Por Frederico B. Teixeira. CC BY-NC-SA.

Cólofon. WP 6.3. Topo ↑.