Um cliente solicitou uma tabela de preços como parte de um site, mas com um valor total em vermelho e riscado para sinalizar uma oferta especial, depois o novo valor e, por fim, o valor parcelado em destaque. O problema é que, apesar do módulo de tabela de preços ter diversos campos, não é possível colocar tags html nesses campos. Sendo assim, no lugar do preço, só seria viável ter um único estilo.
Acrescentei uma classe css à tabela e decidi incluir o conteúdo que deveria ter estilos diferentes através de css. Eis o código:
.desconto .et_pb_pricing_table:nth-of-type(2) .et_pb_sum::before {
content: 'R$987';
display: block;
margin-right: 5px;
font-size: 50px;
color: #FF0000;
text-decoration: line-through;
line-height: 1.5em;
}
.desconto .et_pb_pricing_table:nth-of-type(2) .et_pb_sum::after {
content: '12x R$38,68';
display: block;
font-size: 50px;
line-height: 1.5em;
}Os seletores ::before e ::after criam pseudo-elementos e permitem adicionar conteúdos com o content. O display: block garante a quebra da linha.
