Having trouble getting :before and :after working while content: "";

Question

Using SASS I'm trying to have an image with a diagonal overlap in the bottom right but before getting far I realised the :before and :after will only work if "content" has text inside it. Where have I gone wrong with this?

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

just added html in to the post. changing width and height doesnt change it — JMR0102, Jan 13 '19 at 13:10

score 0 · Answer 1 · answered Jan 13 '19 at 13:11

Set fixed height/width and position:absolute alsp add position:relative to 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>

Having trouble getting :before and :after working while content: "";

1 Answers1