Line changes color depending on length

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;
  }
}