English Quotes how to edit?

3

I'm doing a site that I came across that a text will have an English quote, so that's fine, 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 do not use position absolute does not solve because the quotation mark has to be at the end and at the beginning of the sentence, so how do I make the final quotation mark appear correctly at the end of the text?

IMAGE

CSSCODE

.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; }     
asked by anonymous 10.07.2018 / 23:40

2 answers

2

A solution using JavaScript to insert the quotation marks at the end of the text. Since you're using flex , inserting 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 span tag so you can insert another content into the stylized quotation marks.

With for you enter the final quotation mark at the end of all the 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>
    
11.07.2018 / 00:18
2

EDIT

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

First check that HTML has the tag <q> ... </q> where Q stands for quote See what the Mozilla documentation says about this tag: link

  

The HTML element <q> indicates that the text in the attachment is a short quote online. Most modern browsers implement this by enclosing the text in quotes.

Then see that CSS has the quote attribute where you can customize the type of asp you want to use. link

  

The CSS property quote indicates how user agents should render quotation marks.

Ex:

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

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

NowtheanswerIthinkismostappropriate

First,donotset::beforeand::afterto<h5>,inthiscaseusethe<q>taginsidethetitletag:<h5><q>...

Nowjustsetthetypeofquoteyouwant(doublequotationmarks),andthenstylizethe::beforeand::afterofthetag<q>

Seehowtheresultofthecustomquotesanddefaultquotesplacedrightinsidethetextis.OBS:Ileftthecommentsinthecode

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>

An option with CSS only

I do not know if you have any other CSS influencing your code, but here it is normal to make a setting in the top and bottom with position:absolut NOTE: I've separated the shorthand from font to get better view of attributes.

No% of% vc controls the height you want as well as top: and uses bottom and margin to give the spacing between quotation marks and 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>
    
11.07.2018 / 00:13