刪除 :before :after 偽元素中的意外空間

Question

我最近在將 SVG 添加到 :before 和 after 偽元素以在頁面上獲得彎曲部分時遇到了問題。

.div:after {
    position: absolute;
    content: url(svg/curve-down-bottom.svg);
    width: 100%;
    bottom: -1px;
    left: 0;
    z-index: 999;
}

除了在偽元素中的 SVG 下方有額外的空間外，該方法效果很好，如下所示：

我嘗試了很多方法來解決這個問題，但請參閱下面的答案以了解最有效的方法！

我希望這可以幫助別人。

Answer 1

添加行高：0； 修復了問題，如下：

.div:after {
    position: absolute;
    content: url(svg/curve-down-bottom.svg);
    width: 100%;
    line-height: 0;
    bottom: -1px;
    left: 0;
    z-index: 999;
}

你可以在這里看到：

正如其他人評論的那樣，您還可以添加display: block; . 這在過去曾處理過類似的問題，其中圖像下方有空間，但是這個特定問題line-height:0; 提供了想要的結果。

.div:after {
    position: absolute;
    content: url(svg/curve-down-bottom.svg);
    width: 100%;
    line-height: 0;
    bottom: -1px;
    left: 0;
    z-index: 999;
    display: block;
}