Делайте речевые метки больше, чем остальная часть текста на сайте Squarespace

Question

Я работаю над Squarespace

В нижней части домашней страницы, где есть цитаты из отзывов (с розовым фоном), я бы хотел, чтобы кавычки были больше, чем остальная часть текста.

Я вижу, что при проверке, что кавычки находятся в пределах <span></span> тег.

Если я добавлю несколько пользовательских CSS:

span {
  font-size: 200px;
  position: relative;
  top: 100px
}

Затем я могу получить кавычки вокруг размера и позиции, которую я хочу, но тогда это создает разрыв внизу между двумя последними строками текста, пожалуйста, смотрите скриншот. Здесь:

у кого-нибудь есть решение?

Answer 1

Попробуйте использовать псевдоэлементы вместо <span> -с следующим образом:

figure {
    box-sizing: border-box;
    margin: 0;
    padding: 1em;
    background-color: #eca29f;
    color: #fff;
    width: 100%;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    font-size: 22px;
    letter-spacing: .015em;
    line-height: 1.6em;
    text-transform: none;
}
blockquote:before {
    content: "“";
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.4em;
}
blockquote:after {
    content: "”";
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.4em;
}

<figure>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>
</figure>