Как сделать ширину псевдоэлемента after — от края родителя до края страницы?

Question

[mxmwerner]

Как сделать так, чтобы псевдоэлемент after при наведении начинался у левого края родителя, а заканчивался у правого края страницы?

<div class="flex">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

.flex
    display: flex
    justify-content: space-between
 
.block
    position: relative
    width: 50px
    height: 50px
    background-color: red
        &::after
            content: ''
            display: block
            position: absolute
            left: 0
            bottom: 0
            height: 5px
            width: 0
            background-color: green
        &:hover::after
            width: ???

Answer 1

[fallus]

Понятия не имею как применять css-переменные в sass. Но если чистый, никем не тронутый, девственный, единоначальный CSS, то можно так:

Comments

[mxmwerner]

я привел неудачный пример - положение элемента по горизонтали может быть разным. я исправил код выше. как быть в такой ситуации?

[fallus]

mxmwerner, Если ширина полоски всё-таки может выходить за пределы экрана, но их не должно быть видно, то так:


Иначе, примерно так:

[mxmwerner]

Да, это то, что надо! Спасибо, что помогли разобраться :)