CSS Pseudo Elements

by aroarman

HTML

<div class="first-task">
  <p class="first">Hello World</p>
  <br>
  <p class="second">Hello World</p>
</div>

<br><br><br>

<div class="second-task">
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
</div>

SCSS

.first-task {
  p {
    position: relative;
    display: inline;
    
    &::after {
      content: '';
      width: 0;
      transition: width 500ms ease;
      position: absolute;
      left: 0;
      border-top: 2px solid blue;
    }
    
    &.first {
      
      &::after {
        bottom: 0;
      }
    }
    
    &.second {
      
      &:after {
        top: 50%;
      }
    }
    
    &:hover {
          
      &.first {
        
        &::after {
          width: 100%;
        }
      }

      &.second {
        
        &::after {
          width: 100%;
        }
      }
    }
  }
}

.second-task {
  p {
    color: black;
    
    &:nth-of-type(3n+3) {
      color: red;
    }
    
    &:nth-of-type(2n) {
      color: green;
    }
  }
}