在 Squarespace 网站上使语音标记大于其余文本

Question

在主页底部有推荐语录的地方（粉红色背景）我想把引号弄得比其他文字大。

我去检查发现引号在<span></span>标签内。

如果我添加一些自定义 CSS:

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

然后我可以在我想要的大小和位置周围得到引号，但是它会在最后两行文本之间的底部产生一个空隙，请看截图Here:

有人有解决办法吗？

Answer 1

尝试使用伪元素代替<span>-s如下：

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>

在 Squarespace 网站上使语音标记大于其余文本

Make speech marks bigger than rest of text on a Squarespace website

html

css

squarespace