Html 删除伪元素：before:after中的意外空格

我最近在添加SVG时遇到了一个问题：在伪元素之前和之后获取页面上的曲线部分

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

该方法非常有效，除了伪元素中SVG下方有额外的空间外，如下所示：

我尝试了很多方法来解决这个问题，但是下面我的答案是有效的

---

我希望这对某人有所帮助。

添加线条高度：0；已修复问题，如下所示：

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

A你可以在这里看到：

正如其他人所评论的，您还可以添加display:block。这在过去的类似问题中起到了作用，其中图像下方有空间，但是对于这个特定问题行高：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;
}

---

您需要添加完整的html/css代码，并使用SVG的绝对路径。我们无法在这方面帮助您使用

display:block

将是一个更好的解决方案。@PaulLeBeau我尝试了所有方法，包括

display:block

，但没有成功work@PaulLeBeau. 谢谢你的建议。如前所述，我提供的CSS示例就是适合我的解决方案。我添加了您对display:block的建议，因为尽管它不是本例中的解决方案，但它在过去处理过某些类似的问题。谢谢