Quebras de linha podem ser adicionadas a elementos HTML sem ter que usar um retorno de quebra de
usando pseudo-elementos. Pseudo-elementos são usados para modelar uma parte específica de um elemento. Aqui usaremos:: after para estilizar um elemento HTML para adicionar uma quebra de linha.
No código acima, usamos o pseudo-elemento :: after
em cada elemento embutido (representado pelo intervalo) para adicionar um retorno de carro (representado por "a") após a linha do intervalo de texto. O :: after
neste caso tem uma propriedade content e uma propriedade whitespace disponível para uso.
A propriedade "content" descreve as coisas que queremos injetar na duração. A propriedade de espaço em branco nos diz se devemos preservar o espaço em branco. Deixar essa propriedade específica desabilitada não interfere no recurso de travamento em linha do compartimento. Portanto, precisamos adicionar essa propriedade específica para substituí-la.
À medida que você joga cada vez mais com estilo e layout, provavelmente descobrirá que a solução acima não é necessariamente a melhor solução. Se você adicionar preenchimento de qualquer tipo junto com o plano de fundo, verá que essas propriedades CSS tendem a desaparecer onde o plano de fundo entra. Veja o código de exemplo abaixo que ilustra o ponto:
Professor Dumbledore
Professor McGonagall
Professor Rogue
professor Trelawney