EDIT
Fiz essa nova resposta pois acredito que a anterior não era a melhor opção, tanto semanticamente quanto aos recursos que o CSS oferece que deveriam ser usado da forma correta e não com "jeitinho" para funcionar.
Primeiramente veja que o HTML tem a tag <q> ... </q>
onde Q significa quote Veja o que diz a documentação da Mozilla sobre essa tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q
O elemento HTML <q>
indica que o texto em anexo é uma cotação curta em linha. A maioria dos navegadores modernos implementam isso cercando o texto entre aspas.
Depois veja que o CSS tem o atributo quote
onde é possível customizar o tipo de aspa que vc quer utilizar. https://developer.mozilla.org/en-US/docs/Web/CSS/quotes
A propriedade CSS quote
indica como os agentes do usuário devem renderizar aspas.
Ex:
q {
quotes: '“' '”';
}
Agora veja que quando a tag <q>
é renderizada pelo browser ele inclui dois pseudo-elementos ::before
e ::after
automaticamente.

Agora a resposta que acredito ser mais adequada
Primeiro não coloque o ::before
e ::after
na tag <h5>
, nesse caso use a tag <q>
dentro da tag de título: <h5><q>...
Agora basta definir o tipo de quote
que vc quer (aspas inglesas), e depois estilizar os ::before
e ::after
da tag <q>
Veja como fica o resultado das aspas customizadas e das aspas default colocadas direto dentro do text. OBS: Deixei os comentários no código
div {
width: 400px;
margin: 0 auto;
}
h5 {
font-family: 'Libre Baskerville', sans-serif;
font-size: 32px;
text-align:center;
}
q::before, q::after {
quotes: '“' '”' ; /* estilo das aspas */
color: red; /* cor das aspas */
font-size: 40px; /* tamanho da fonte das aspas */
position: relative;
top: 4px; /* altura das aspas relativas ao texto, ajuste ótico devido a variação do tamanho da fonte das aspas*/
}
<div>
<h5><q>sit amet consectetur</q></h5>
<h5><q>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, consequatur.</q></h5>
<h5>Lorem ipsum dolor "sit amet consectetur" adipisicing elit.</h5>
</div>
Uma opção só com CSS
Olha eu não sei se tem algum outro CSS influenciando no seu código, mas aqui está normal fazendo um ajuste no top
e bottom
com position:absolut
OBS: Eu separei o shorthand da font
pra ficar melhor de visualizar os atributos.
No top:
vc controla a altura que quiser assim como no bottom
e usa margin
e padding
para dar o espaçamento entre as aspas e o texto.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.interna {
width: 40%;
margin: 0 auto;
}
.noticias .interna H5{
width:100%;
line-height: 33px;
font-weight: normal;
font-size: 23px;
font-family: 'Libre Baskerville', sans-serif;
text-align:center;
color:#333333;
padding-bottom: 0;
position: relative;
}
.noticias .interna H5::before{
content: "“";
line-height: 33px;
font-weight: normal;
font-size: 50px;
font-family: 'Libre Baskerville', sans-serif;
position: absolute;
top: 0.5rem;
margin-left: -1.5rem;
}
.noticias .interna H5::after{
content: "”";
line-height: 33px;
font-weight: normal;
font-size: 50px;
font-family: 'Libre Baskerville', sans-serif;
position: absolute;
bottom: -0.5rem;
padding-left: 10px;
}
<div class="noticias">
<div class="interna">
<h5>Lorem ipsum dolor psa!</h5>
</div>
</div>
<div class="noticias">
<div class="interna">
<h5>Lorem ipsum dolor sitanimi eveniet laborum ipsa a!</h5>
</div>
</div>
<div class="noticias">
<div class="interna">
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur hic ullam fugiat! Veniam accusamus voluptates animi eveniet laborum ipsa a!</h5>
</div>
</div>