css 在Squarespace网站上，使演讲标记大于文本的其余部分

kmbjn2e3 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(128)

我正在研究
在主页底部的地方有证明报价（与粉红色的背景），我想使引号比其余的文字大。
通过检查可以看出，引号位于<span></span>标记内。
如果我添加一些自定义CSS：

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

然后，我可以在我想要的大小和位置周围添加引号，但是它会在最后两行文本之间的底部创建一个间隙，请参见屏幕截图Here：
有人有解决办法吗？

css

来源：https://stackoverflow.com/questions/47022636/make-speech-marks-bigger-than-rest-of-text-on-a-squarespace-website

1条答案

按热度按时间

ifsvaxew1#

尝试使用伪元素而不是<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>

赞(0）回复(0）举报 2023-05-08

我来回答

css 在Squarespace网站上，使演讲标记大于文本的其余部分

1条答案

相关问题

热门标签

最新问答