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

Question

我正在研究 Squarespace

在主页底部有推荐语录的地方(粉色背景)我想把引号做的比其他文字大一些。

我可以通过检查看到引号在 <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>