AHP 2020 Link Styling

by andyjh07

HTML

<p>Currently residing in Chatham, Kent, I took up photography as a hobby mostly because of my love of travelling. I plan to use this website to show my <a href="#">photos</a> and <a href="#">blog about my travels</a> and the stories along the way.</p>

<p>I’m an active contributor on Unsplash, a site which is run by generous photographers giving their photos away for free. I try my best to upload a couple of photos a week so please feel free to check out my portfolio and <a href="#">use my Unsplash photos</a> for anything you wish!</p>

<p>If you want to discuss a project, idea or want some travel tips, please don’t hesitate to contact me.</p>

SCSS

p {
  color: #002134;
  font-weight: 400;
  margin-bottom: 30px;
  letter-spacing: 1.2;
  line-height: 22px;
  font-size: 14px;
  
  a {
    color: currentColor;
    font-weight: bold;
    position: relative;
    text-decoration: none;
    transition: 0.3s;
    
    &:after {
      content: '';
      height: 3px;
      width: calc(100% - 6px);
      background-color: #FFA900;
      position: absolute;
      bottom: -2px;
      left: 6px;
      transition: 0.3s;
    }
    
    &:hover {
      color: white;
      &:after {
        height: calc(100% + 2px);
        width: calc(100% + 4px);
        left: -2px;
        z-index: -1;
        background-color: #002134;
        border-radius: 4px;
      }
    }
    
    &:visited {
      color: currentColor;
    }
  }
}