How to make the after pseudo-element width from the edge of the parent to the edge of the page?

Question

css

How can I make the after pseudo-element, on hover, start at the left edge of the parent and end at the right edge of the page?

<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

I have no idea how to use css variables in sass. But if pure, untouched, virgin, one-man CSS, then you can do this: