Link

Overview

Basic styling for the <a> anchor element.

<a href="https://youtu.be/BBJa32lCaaY">Click me!</a>

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/bases/link.css

• Directorystyle

  • Directorybases

    • link.css

Stylesheet

@layer cwf-bases {
  a {
    &:not(.button):not(.nav__item) {
      color: var(--link-color, blue);
      text-decoration: var(--link-text-decoration, none);
      outline: var(--link-outline, 0);
      transition: var(--link-transition, all 0.2s ease-in-out);

      &:visited {
        color: var(--link-visited-color, purple);
        text-decoration: var(--link-visited-text-decoration, none);
      }

      &:hover {
        color: var(--link-hover-color, DarkBlue);
        text-decoration: var(--link-hover-text-decoration, underline);
      }

      &:focus-visible,
      &:focus {
        color: var(--link-focus-color, red);
        text-decoration: var(--link-focus-text-decoration, underline);
      }

      &:active {
        color: var(--link-active-color, FireBrick);
        text-decoration: var(--link-active-text-decoration, underline);
      }

      &[aria-current="page"] {
        color: var(--link-current-color, maroon);
        text-decoration: var(--link-current-text-decoration, none);
      }
    }
  }
}