Implementing Half-Transparent CurrentColor Underlines with CSS

Tokenhell Support Updated at: 30 Mar 2024 469

Write HTML Here

​x
 
<p>
  <strong>2024 update:</strong> Explore the latest enhancements on <a href="https://codepen.io/chriskirknielsen/pen/abYGmXd" target="_top">our updated page</a>.
</p>
​
<p>
  Discover a simple yet effective technique on <a href="https://chriskirknielsen.com" target="_top">my portfolio site</a>, showcasing how the <code>background-image</code> underline achieves an appealing aesthetic with an opacity that is finely tuned to be half as vivid as the text color. Note, the visual impact might vary based on the zoom level or on devices with high-density displays.
</p>

Write CSS Code Here

xxxxxxxxxx
 
a {
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(currentColor, transparent, currentColor, transparent, currentColor, transparent, currentColor)
    repeat-x
    0 100% /* Bottom-aligned */
    /
    100% 3px; /* 100% width, 3px height */
  box-decoration-break: clone;
}
​
/* Not so important styles below */
* { box-sizing: border-box; }
​
html,
body {
  height: 100%;
  
  font-size: 16px;
}
​
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  
  color: #e6e6e6;
  background-color: #161616;
}
​
p {
  margin: auto;
  padding: 2em;
​
  font-size: 1.5em;
}
​
a {
  padding: 0 2px;
  
  color: #00a39b;
}
​
a:hover,
a:focus {
  color: #f90606;
}