Decrease line-height

Question

I'm trying to do a paragraph highlighted by quote marks, and I want the quote marks to be bigger than the text in the paragraph. so what I have right now is

.quote {
    font-style: italic;
    margin-bottom: 20px;
}
.quote:before {
    content: open-quote;
    font-size: larger;
}
.quote:after {
    content: close-quote;
    font-size: larger;
}

However, quite obviously, it gives a larger-than-normal line height on small-width screens. Is it possible to keep the line-height consistent? If not, how do I implement the large quotation marks?

Thanks

Answer 1

Use css variables and calc(). Something like this:

.quote {
  --font-size: 16;
  --line-height: 1;
  --quote-font-size: 32;
  font-style: italic;
  margin-bottom: 20px;
  font-size: calc(var(--font-size) * 1px);
  line-height: var(--line-height);
  display: flex;
}

.quote:before,
.quote:after {
  font-size: calc(var(--quote-font-size) * 1px);
  line-height: calc(var(--font-size) / var(--quote-font-size));
}

.quote:before {
  content: open-quote;
}

.quote:after {
  content: close-quote;
}

<div class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, a.</div>