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::before
and::after
to<h5>
,inthiscaseusethe<q>
taginsidethetitletag:<h5><q>...
Nowjustsetthetypeofquote
youwant(doublequotationmarks),andthenstylizethe::before
and::after
ofthetag<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>
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.