Anchor tags

Anchor tags should:

have clear hover and focus states
be distinguishable by more than just colour
have desctiptive content like "We'd love for you to get in touch with us
clearly communicate if they open a new window
show the full URL if printed

Anchor tags should not:

use non descriptive text like "Click here to get in touch
perform an action, for this use a button

Code

Use the tabs to view the anchor tags source code.

HTML
CSS

HTML

                      
                      
  <p>
    <a href="#" class="anchor">Link</a>
  </p>

  <p>
    <a href="#" class="anchor" rel="noopener" target="_blank">External link</a>
  </p>

  <p>
    <a href="#" class="anchor">Incredibly long anchor text link</a>
  </p>

CSS


  /*
  Anchors
  ----------------------------------- */
:root {
   --colour-focus: hsl(311, 100%, 50%);
}

.footer {
  --colour-focus: hsl(312, 100%, 24%);
}

/* a {
  --link: hsl(230, 60%, 50%);
  --link-visited: hsl(290, 60%, 50%);
  --link-hover: hsl(230, 80%, 60%);
  --link-active: hsl(350, 60%, 50%);
} */

 a,
.anchor {
  transition: all .3s ease-in-out;
  color: currentColor;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: all .3s ease-in-out;
}

a:hover,
.anchor:hover {
  /* outline: dashed 1px var(--colour-pink); */
  text-decoration: none;
  outline: none;
  text-decoration: none;
  background: var(--colour-pink-light); 
}

a:active,
.anchor:active {
  outline-style: dashed;
  outline-color: var(--colour-pink);
  outline-width: 1px;
  background: 
}

a:focus,
.anchor:focus {
  outline: none;
  text-decoration: none;
  background: var(--colour-focus);
  box-shadow: 0 -2px var(--colour-focus), 0 4px var(--colour-black);
}

a:visited,
.anchor:visited {
  outline-style: dashed;
  outline-color: var(--colour-pink);
  outline-width: 1px;
}

.anchor[target=_blank]:after {
  content: ' (opens new window)';
} 

/* Print styles */

@media print {
  
  a,
  .anchor{
    color: #000!important;
  }

  a:before,
  .anchor:before {
    content:" (" attr(href) ") "!important;
    font-size: 0.8rem;
    font-weight: normal;
  }

  a:after ,
  .anchor:after {
    content: '';
  }

}

Back to all components