Designing your website’s visual appeal with a refined half-transparent underline for hyperlinks can introduce a layer of stylish elegance. This tutorial will guide you through creating this design feature using HTML and CSS, utilizing the currentColor keyword. This approach guarantees that the underline seamlessly matches the link’s text color, offering a harmonious and adaptable aesthetic to your website’s interface.
Step1: HTML Structure
The provided HTML code introduces a 2024 update with a link to an enhanced webpage and highlights a styling technique found on a portfolio website, where the background-image property is used to create underlines with an opacity finely adjusted to half the intensity of the text color, acknowledging potential variability in visual impact due to zoom levels and high-density display devices.
<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>
Step2: Styling Links with Half-Transparent Underline
This CSS code creates a unique underlining effect for links using a linear gradient that simulates dashed underlines, applied through the background property. It also sets up a flexible, responsive web layout with a dark theme, ensuring text and links adapt their colors on hover or focus for enhanced interactivity.
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;
}Implementing Half-Transparent CurrentColor Underlines with CSS Demo
With just a few lines of HTML and CSS, you’ve created a stylish and dynamic half-transparent underline effect for your links that automatically matches the text color, thanks to the currentColor property. This method not only enhances the aesthetic appeal of your site but also keeps your CSS clean and adaptable.
