删除：之前：之后的伪元素

Question

我最近在添加SVG时出现问题：在伪元素之前和之后获取页面上的弯曲部分。

.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;
}