English quotes how to edit?

Question

I’m making a website that I found that a text will have English quote, so far it’s okay to just do the code, but the problem starts when I edit your font to get bigger, the final quote creates an automatic height that I couldn’t even put in fixed height, use position Absolute does not resolve pq the quote has to stay at the end and at the beginning of the sentence, so how do I make the end quote correctly at the end of the text?

IMAGE

CSS CODE

.noticias .interna H5 {
    width: 100%;
    display: flex;
    font: normal bold 23px/33px 'Libre Baskerville', sans-serif;
    text-align: center;
    justify-content: center;
    color: #333333;
    padding: 0 0 30px 0;
}
.noticias .interna H5:BEFORE {
    content: "“";
    font: normal bold 50px/33px 'Libre Baskerville', sans-serif;
}
.noticias .interna H5:AFTER {
    content: "”";
    font: normal bold 50px/33px 'Libre Baskerville', sans-serif;
}

Answer 1

EDIT

I made this new answer because I believe that the previous one was not the best option, both semantically and the features that CSS offers that should be used in the correct way and not with "way" to work.

First see that HTML has the tag <q> ... </q> where Q means quote See what the Mozilla documentation says about this tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q

The HTML element <q> indicates that the attached text is a short quotation in line. Most modern browsers implement this by enclosing the text in quotes.

Then see that CSS has the attribute quote where it is possible to customize the type of quotation mark that you want to use. https://developer.mozilla.org/en-US/docs/Web/CSS/quotes

The CSS property quote indicates how user agents should render quotes.

Ex:

q {
  quotes: '“' '”';
}

Now see when the tag <q> is rendered by the browser it includes two pseudo-elements ::before and ::after automatically.

Now the answer I believe is most appropriate

First don’t put the ::before and ::after on the tag <h5>, in that case use the tag <q> within the title tag: <h5><q>...

Now just set the type of quote that you want (quotation marks), and then stylize the ::before and ::after tag <q>

See how the result of custom quotes and default quotes placed directly inside the text. OBS: I left the comments in the code

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>

---

A CSS-only option

Look I don’t know if there’s any other CSS influencing your code, but here’s a normal setting in top and bottom with position:absolut NOTE: I separated the shorthand of font to better visualize the attributes.

In the top: you control the time you want just like in bottom and uses margin and padding to give the spacing between the quotation marks and the text.

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>

Answer 2

A solution using Javascript to insert quotes at the end of the text. How you are using flex, insert a direct tag into the text would make it positioned to the right of the text. So I suggest you include all the text in a tag span to insert another content in stylised quotes.

With a for you insert the final quotation marks at the end of all texts in <h5><span>:

var h5 = document.querySelectorAll("h5 span");
for(var x=0; x<h5.length; x++){
   h5[x].innerHTML += "<span>”</span>";
}

.noticias .interna H5{
   width:100%;
   display:flex;
   position: relative;
   font:normal bold 23px/33px 'Libre Baskerville', sans-serif;
   text-align:center;
   justify-content:center;
   color:#333333;
   /* padding:0 0 30px 0; removido */
}
.noticias .interna H5:BEFORE{
   content:"“";
   font:normal bold 50px/33px 'Libre Baskerville', sans-serif;
}
/* código abaixo adicionado para pegar o span da aspas */
.noticias .interna h5 span span{
   position: relative;
   font:normal bold 50px/0 'Libre Baskerville', sans-serif;
   top: 15px;
}

<div class="noticias">
   <div class="interna">
      <h5>
         <span>
            O Brasil tem posição de destaque em relação ao etanol.
            <br>
            Temos a solução aqui em casa, importar
            <br>
            baterias não vai alimentar a economia local.
         </span>
       </h5>
   </div>
</div>