<p>Flapjacks on a <a href="#">sunny warm</a> afternoon.</p>
:root {
  --mainColor: #ff9800;
}

body {
  align-items: center;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  height: 100vh;
  justify-content: center;
}

a {
  color: var(--mainColor);
  text-decoration: none;
}

a:hover {
  color: transparent;
  -webkit-text-stroke: 2px var(--mainColor);
}

@supports not(-webkit-text-stroke: 2px red) {
  a:hover {
    text-shadow:
      3px 3px 0 var(--mainColor),
      -1px -1px 0 var(--mainColor),
      1px -1px 0 var(--mainColor),
      -1px 1px 0 var(--mainColor),
      1px 1px 0 var(--mainColor);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.