Posicionamento de elementos com after e before

[mruoppolo 14]

Olá, tudo bem?

Eu tenho no momento a seguinte princing table:

Mas preciso que ela fique assim:

O problema é que faz parte de um tema wordpress e não tenho como editar diretamente o html porque essas princing tables estão vindo diretamente de um pagebuilder, ai eu encontrei a solução de colocar esse preço com a line-through utilizando o CSS, a minha estrutura de titulos da pricing table em HTML é:

<div class="et_pb_pricing_content_top">
    <span class="et_pb_et_price"><span class="et_pb_dollar_sign">R$</span><span class="et_pb_sum">195</span><span class="et_pb_frequency">/Mês</span></span>
</div>

Eu criei o seguinte CSS:

.et_pb_pricing_table_2 div.et_pb_pricing_content_top span.et_pb_et_price {
  margin-top: 50px !important;
}
.et_pb_pricing_table_2 div.et_pb_pricing_content_top:after {
  content: "R$295/mês";
  color: #fdc2c2;
  top: -20px !important;
  text-decoration: line-through;
}

Porém só consigo posicionar ao lado, não consigo posicionar acima da div, se eu mudo o after para o before ele fica desta forma aqui:

Como eu posso fazer para posicionar corretamente??

Obrigado ;)

[L. Henrique 179]

Você pode definir height ao elemento pai e atribuir propriedades ao filho como top: 0; vertical-align: top;

ou se preferir uma solução mais elegante: A Complete Guide to Flexbox

[mruoppolo 14]

Valeu cara :D