você pode adicionar quebras de linha à: após elemento pseudo?
-
16-09-2019 - |
Pergunta
Eu quero acrescentar uma <br />
a uma classe particular. Usando o:. Depois da aula pseudo simplesmente exibe <br />
como texto
Existe uma maneira de fazer este trabalho?
É interno para IE8 para que os problemas do navegador não são um problema. Se eu fizer
<span class="linebreakclass">cats are</span> brilliant
Eu quero "brilhante" para aparecer em uma nova linha.
Solução
Você não será capaz de processar tags HTML, mas você pode definir o estilo parecido com isto:
.needs-space:after
{
content: " ";
display: block;
clear: both; /* if you need to break floating elements */
}
A configuração principal aqui é display: block;
Este irá processar : depois de conteúdo dentro de um DIV
. E este elemento pseudo é suportado por todos os navegadores mais recentes. Incluindo o IE. Dizendo isso, você deve estar ciente de seus usuários e seus navegadores.
Outras dicas
Você pode usar seqüência \A
escape, o que tornará como uma nova linha:
.new-line:after {
white-space: pre-wrap;
content: "\A";
}
Este método foi mencionado no CCS 2.1 Especificação para a propriedade content
:
Os autores podem incluir novas linhas no conteúdo gerado por escrito o sequência de escape
"\A"
em uma das cordas após a'content'
propriedade. Esta quebra de linha inserido ainda está sujeita à'white-space'
propriedade.
E fica ainda pior - o:. Depois da aula nem sequer funciona no IE6 (e provavelmente alguns outros navegadores também)
Eu acho que você realmente quer aqui é uma margem na parte inferior do elemento, para fornecer espaçamento.
Simplesmente
.myElement {
margin-bottom: 1em;
}