删除 :before :after 伪元素中的意外空间

Question

I recently had a problem when I was adding SVGs to :before and after pseudo elements to get curved sections on a page.

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

The method worked great apart from that there was additional space below the SVG within the pseudo element, as shown below:

I tried many methods to fix this, but see my answer below for the one that worked!

I hope this helps someone.

Answer 1

Adding line-height: 0; fixed the issue, as below:

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

A you can see here:

As others have commented you could also add display: block; . This has worked with similar issues in the past where images have space below, however with this specific issue line-height:0; provided the desired result.

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