SVGs in pseudo elements

Here’s an SVG inside a div using and img tag.

Because the image has max-width: 100% set it will resize to fit it’s container.

.basic {
    width: min(100%, 400px);
    height: 400px;
    background-color: #f49292;
    overflow: auto;
    resize: both;

    & img {
        max-width: 100%;
        height: auto;
    }
}

So adding this as a pseudo element the basic syntax could simply be adding the image to the content like so:

div::before {
    content: url(my.svg);
}

And here is the problem. The image is too big AND there is no way to target the image from within the CSS.

The pseudo element is NOT the image.

Again:

THE PSEUDO ELEMENT IS NOT THE IMAGE.

Rather the image is the content of the pseudo element. So adding height and width to the pseudo element has no effect on the image’s size.

One way we can target the image though is if it is background image. Then we can use the CSS properties background-size and background-position. But bear in mind this pseudo element has no dimensions without content. It’s effectively 0px wide and high. So we can add dimensions but as it’s an inline element so that won’t work.

Nada! So make it a block level element.

Great right? Except for one thing. As a block level element before the content of the div it has pushed that content, “some text”, down.

div::before {
    content: '';
    background-color: pink;
    background-image: url(face.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 1em 50px;
    display: block;
    width: 100%;
    height: 100%;
}

So rectify that we’ll set our pseudo element to position: absolute. And for that to be relative to the containing div rather than the whole page, that div needs to be set to something other than static. So set it to position: relative.

We can now set the pseudo element to inset: 0 which ignores the element’s margins. And we don’t need width and height any more.

We can now move the image anywhere within the frame with background-position and scale it with the background-size.

div::before {
    content: '';
    background-color: rgb(254, 179, 191, 0.75);
    background-image: url(face.svg);
    background-size: 175px;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
    display: block;
}

Recap

1. content: '';
   We can’t resize a content image in a pseudo element with CSS because the image is not the pseudo element.
2. background-image: url(my.svg)
   Set the image as a background image.
3. display: block
   As a background image the pseudo element needs to be set to display: block.
4. position: absolute
   This block level element pushes the original content out of the way so we set the pseudo element to position: absolute and inset: 0. We don’t need height and width properties now.
5. position: relative
   The parent element, that is the div, needs to be set to position: relative or something other that the default position: static.

img {
    max-width: 100%;
}

.basic {
    width: min(100%, 300px);
    height: 200px;
    background-color: #f49292;
    overflow: auto;
    resize: both;

    & img {
        max-width: 100%;
        height: auto;
        border: solid 6px blue;
    }
}


.pseudo {
    width: 400px;
    height: 200px;
    font-size: 2em;
    font-weight: bold;
    color: #444;
    padding: 1em;
    text-align: right;
    margin-block: auto;
    color: #333;
    background-color: #88cb8e;
}

.attempt-1::before {
    content: url(face.svg);
    width: 300px;
    height: 200px;
}

.attempt-2::before {
    content: '';
    background-image: url(face.svg);
    background-size: contain;
    width: 300px;
    height: 200px;
}

.attempt-3 {
    // overflow: auto;
}
.attempt-3::before {
    content: '';
    background-color: pink;
    background-image: url(face.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 1em 10px;
    display: block;
    width: 100%;
    height: 100%;
}

.attempt-4 {
    position: relative;
    
    &:hover::before {
        background-color: transparent;
    }
}

.attempt-4::before {
    content: '';
    background-color: rgb(254, 179, 191, 0.75);
    background-image: url(face.svg);
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: 0.25em 15px;
    position: absolute;
    inset: 0;
    display: block;
    transition: background 0.5s ease-out;
}

.code-file {
    display: none;
    scale: 1 0;
    transform-origin: top center;
    transition: 0.5s ease-in;
    transition-property: overlay display scale;
    transition-behavior: allow-discrete;
}

.code-file-btn {

}

.show-code {
    scale: 1 1;
    display: block;

    @starting-style {
        scale: 1 0;
    }
}

.recap-list li {
    margin-bottom: 1em;
}