Is there a way to globally change a css variable?

Question

So I've got css to change --size to 500px, and a :root that sets it 0 zero. When I change --size on hover, it changes locally, and doesn't change the width of another element.

My HTML is:

<html>
<head>...</head>
<body>
<nav>...</nav>
<main>
<a href="new.html" class="btnLink">Create a new project!</a>
<div class="underline"></div>
</main>
</body>
</html>

Where "..." is stuff I'm too lazy to put (and know that its not going to add anything to the question)

My CSS:

.btnLink:hover {
    --size: 500px;
}

.btnLink {
    position: absolute;
    left: 50%;
    --movefar: translate(-50%,0);
    transform: var(--movefar);
}

.underline {
    position: absolute;
    top: calc(6rem + 1px); /* Somehow magically puts it the place I want */
    left: 50%;
    transform: var(--movefar); /* doesn't work for some reason */
    overflow: clip;
    background-color: white;
    color: transparent;
    height: 1px;
    width: var(--size);
}

In this case I am using 2 variables to control it, but they update locally, so it doesn't work. Also, I realize theres a way to do this with javascript, but I would rather not use javascript with this.

from the duplicate: https://stackoverflow.com/a/74816531/8620333 — Temani Afif, Jul 11 '23 at 22:38

score 1 · Accepted Answer · answered Jul 11 '23 at 22:07

1

Yes there is a way, you can use the plus (+) in CSS, for example:

.btnLink:hover + .anything {
--size:500px;
}
.btnLink:hover + div {
--size:500px;
}
.btnLink:hover + span:last-of-type {
--size:500px;
}

or in your case:

.btnLink:hover + .underline {
--size:500px;
}

answered Jul 11 '23 at 22:07

Kamikaza

1
1
18

It works, but only for --size, and when I use --movefar as well, it doesn't goto the same position as .btnLink – Slothscript Jul 11 '23 at 22:22

Is there a way to globally change a css variable?

1 Answers1