Spicing up links


by Jeremy Caudle
code

I saw some fantastic link styling on a website called CSS { In Real Life }, designed and built by Michelle Barker, and I thought I’d try and figure out how to recreate it. I don’t think I’ve played with text-underline-offset before, and I’m glad I came across CSS { In Real Life } and its cool link styling. It’s subtle, but really stood out to me. I’m excited to put it into use.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam tincidunt rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris nunc eros, maximus id fringilla ac, posuere ut orci. Maecenas feugiat massa eu enim tempor mattis. In vitae metus consequat, molestie nibh vitae, ultrices tellus. Morbi eget purus sed nisl scelerisque interdum eu at arcu. Fusce quis lorem quis neque elementum pulvinar sagittis.

View the code:

HTML and JS 
<div class="code-block">
            <p>Lorem ipsum dolor sit amet, <a href="#" class="style-one">consectetur adipiscing</a> elit. Donec aliquam tincidunt rhoncus. Class aptent taciti sociosqu ad litora <a href="#" class="style-two">torquent</a> per conubia nostra, per inceptos himenaeos. Mauris nunc eros, maximus id fringilla ac, posuere ut orci. Maecenas feugiat massa eu enim tempor mattis. In vitae metus consequat, molestie nibh vitae, ultrices tellus. Morbi eget purus sed nisl <a href="#" class="style-three">scelerisque</a> interdum eu at arcu. Fusce quis lorem quis neque elementum pulvinar sagittis.</p>
        </div>
CSS 
.code-block {
                font-family: Helvetica, Arial, sans-serif;
                font-size: 20px;
                max-width: 16em;
                padding: 1rem;
                margin: 1rem auto;
                background-color: whitesmoke;
                border: #efefef solid 1px;
                border-radius: 1rem;
            }

            .code-block p {
                line-height: 1.5;
            }

            .code-block p::selection, .code-block p::-moz-selection {
                background-color: rgba(255, 99, 71, 0.33);
            }

            .code-block :is(a) {
                text-underline-offset: 2px;
                text-decoration-thickness: 2px;
                transition: text-underline-offset .0675s ease-out;
            }

            .code-block a:hover {
                text-decoration-thickness: 2px;
                text-underline-offset: .25em;
                text-decoration-skip-ink: none;
                display: inline-block;
                background-color: rgba(255, 255, 255, 0.125);
                color: inherit;
            }

            a.style-one {
                color: rgb(53, 191, 255);
                text-decoration-color: rgb(53, 191, 255);
            }

            a.style-two {
                color: blueviolet;
                text-decoration-color: blueviolet;
            }

            a.style-three {
                color: orangered;
                text-decoration-color: orangered;
            }

Tags