删除 :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;
}