14 replies

Using CSS custom property in inline SVG

I'm trying to replace a single character on a website with an inline SVG. I'm basing what I'm doing on Kevin's video "Basic, Intermediate & Pro animated hamburger icons". The main difference at this point is I'm doing it in a pseudo element:

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

I have the SVG working finally, but I can't get the custom property to apply. If I replace it with an actual color, it works. Is this just not possible as part of the content of a pseudo element or am I doing something wrong? I'm hoping for the latter.

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

Using CSS custom property in inline SVG

Similar Threads

Using CSS custom property in inline SVG

Similar Threads

Similar Threads

Similar Threads