Question

使用SASS，我试图在右下角具有对角线重叠的图像，但在走很远之前，我意识到：before和：after仅在“内容”中包含文本时才起作用。我在哪里出错了？

<section>
    <div class="img">123</div>
</section>



.img {
            width: 70vw;
            height: 70vw;
            margin: 0 auto;
            margin-top: 2vh;

            background-image: url(../img/img.jpg);
            background-position: 50% 0;
            background-repeat: no-repeat;
            background-size: auto 100%;
            border-radius: 25px;

            &:before {
                width: inherit;
                height: inherit;

                content: "";

                background-color: #0A70D1;
            }

Answer 1

设置固定的height/width和position:absolute并将position:relative添加到section

.img {
            width: 70vw;
            height: 70vw;
            margin: 0 auto;
            margin-top: 2vh;

            background-image: url(../img/img.jpg);
            background-position: 50% 0;
            background-repeat: no-repeat;
            background-size: auto 100%;
            border-radius: 25px;
}
section{
position:relative;
}
.img:before {
    width: 150px;
    height: 4px;
    content: "";
    top: 0;
    position: absolute;
    background-color: #0A70D1;
}

<section>
    <div class="img">123</div>
</section>

遇到内容之前的：before和：after时遇到麻烦：“”;

1 个答案: