Line changes color depending on lengrg

Using CSS media queries, change the line color depending on the browser window length.

by Wally Glenn

HTML

<div class="line"></div>

CSS

body {
  padding:4rem;
}


.line{
  height:2px;
  width: 50%;
  background:red;
  cursor: pointer;
  position:relative;
     &:hover:after {
      content: '';
      display:block;
      position: absolute;
      top:0;
      left:0;
      width: 0px;
      height:2px;
      background:blue;
      animation-duration: 1s;
      animation-name: example;
      animation-fill-mode: forwards;
  }
  &:after {
      content: '';
      display:block;
      position: absolute;
      top:0;
      left:0;
      width: 0px;
      height:2px;
      background:blue;
      animation-duration: 1s;
      animation-name: back;
      animation-fill-mode: forwards;
  }
  
}



@keyframes example {
    from {
      width: 0;
     }
    to {
      width: 100%;
    }
}

@keyframes back {
    from {
      width: 200px;
    }
    to {
      width: 0;
    }
}

@media only screen and (max-width: 600px) {
  .line {
    background:yellow;
  }
}

@media only screen and (max-width: 400px) {
  .line {
    background:blue;
  }
}