What strategies does Wired magazine use to create their unique thick underline link style?

Recently, I came across an interesting design choice on Wired magazine's website - they use a thick blue underline for their links that crosses over text descenders and is a different color from the text itself. You can see an example on this random page.

I don't believe this effect is achieved with a simple bottom-border style, as it overlaps the text descenders. It's possible that they are using the new -moz-text-decoration-color and text-decoration-color properties for the color difference, but I haven't been able to determine how they control the line thickness.

I attempted to analyze their CSS, but it's minified and complex, making it difficult to find the specific information I need. I tried searching for terms like -moz-text-decoration-color and border-bottom, but didn't have any luck.

Does anyone know how Wired achieves this unique link style?

htmlcss

Answer №1

Upon inspecting a link, the following styles are revealed:

border-bottom: 1px solid #CBEEFA;
box-shadow: 0px -4px 0px #CBEEFA inset;

The rationale behind using box-shadow is detailed in this informative article.

Answer №2

When working with CSS styles,

border-bottom: 1px solid #cbeefa;  
box-shadow: inset 0 -4px 0 #4CAECF

As stated by W3Schools,

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

Please note that the box-shadow property adds drop shadows to elements. This property allows for adding one or more shadows, each defined by 2-4 length values, an optional color, and an optional inset keyword. Any omitted lengths default to 0.

Answer №3

To reveal the code behind a link, utilize Chrome or Firefox's inspect element feature. By right-clicking on the link and selecting inspect element, you'll find a window that displays the HTML code:

This shows that the styling includes both a border-bottom and box-shadow.

Answer №4

Initially, a .png file was used to achieve the desired effect, but now they have switched to using pure CSS which I find quite pleasing. This brief tutorial demonstrates how to implement this through a CSS stylesheet, along with instructions on how to selectively apply the styling to specific elements.

For instance, the following CSS code would give all links on your website a Wired-style underscore:

/*----Wired Style Links----*/
a:link{
   text-decoration: none;
   box-shadow: inset 0 -5px 0 0 #B4E7F8;
}
a:hover:link:{
background-color: #B4E7F8;
}

Furthermore, here is an example that excludes styling for internal links (those from yourwebsite.com):

/*----Wired Style Links----*/
a[href*="//"]:not([href*="yourwebsite.com"]){
   text-decoration: none;
   box-shadow: inset 0 -5px 0 0 #B4E7F8;
}
a:hover[href*="//"]:not([href*="yourwebsite.com"]){
background-color: #B4E7F8;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The printing code is not able to interpret the CSS

Having trouble with this script not reading the style properly when printing, can anyone assist in identifying the issue? <script type="text/javascript"> $(function () { $("#btnPrint").click(function () { var contents = $( ...

javascriptjquerycsstwitter-bootstrapprinting

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, . ...

cssruby-on-railssasszurb-foundationmodularity

Encountering issues with website optimization on Google Page Speed Insights and facing compatibility problems on a specific website I designed

I attempted to analyze the performance of my website using Google Page Speed Insights and encountered an error message. I have tried looking for a solution without success. Interestingly, when I tested other websites that I manage, everything worked just ...

htmlcssbootstrap-4google-pagespeed

Issue with Bootstrap dropdown list not opening up

Having an issue where the Bootstrap dropdownlist is not displaying its list of contents when clicked. I attempted to add the jQuery library before the bootstrap.min.js file, as suggested in a solution on Stack Overflow, but unfortunately, it did not work ...

htmldrop-down-menubootstrap-4

"Utilizing Bootstrap's form-check feature places the checkbox alongside the text

While attempting to create a checkbox using the Bootstrap form-check class, I encountered an issue with my code. Here is the snippet: <form> <div class="form-section"> <div>Title</div> <div class="form-check"> ...

htmlcssbootstrap-4

The div is not displaying the conditional styling as expected

I need help with mapping an array of cards wrapped in a div. I want the first, second, second-to-last, and last divs to go on a new line or take up the entire row. My project is in Vue3 and I'm using the PrimeVue component library. <div class=" ...

javascriptcssvue.jsprimevue

Ensuring smooth video playback on a website

My website is experiencing issues due to a large mov file that's 157 megabytes. When I try to run it on my page using a javascript scroller animation, the animation becomes choppy. Additionally, I used css to simulate a mask, but it doesn't get m ...

htmlvideoflashmov

"Troubleshooting Issue: jQuery dataTables Filter Functionality Inoperative When Conjoined with

Incorporating the dataTables plugin and recycling code from another page to create a select for filtering a specific column, I encountered issues with the filtering functionality not working as expected. This was perplexing since it was code that had previ ...

jqueryhtmldatatables

What is the most effective way to address duplicate title/meta tags on paginated pages? Can you share some recommended strategies for handling this

Google's webmaster tools are indicating the presence of Duplicate title tags on pages that have pagination. Below are a few examples: HTML suggestions Duplicate title tags Your title provides users and search engines with valuable information about ...

phphtmlseo

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

javascriptjqueryhtmlcssaccessibility

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: Mobile: <FormControl sx={{ m: 1, minWidth: '100%', marg ...

javascriptcssreactjstypescriptmaterial-ui

List of items:1. The first item is elevated in its position

Can anyone explain why the first li item is displaying higher than the rest when I assign an id or class to the div element? Take a look at the code snippet below: <div id="pickList"> <ul *ngFor="let channel of currentPickSelection"> ...

htmlcssangular

Conceal the page's content as it moves beneath a stationary div

My issue involves a fixed div position with a margin from the top of the page. When I scroll my page, the content of my relatively positioned div (containing page content) is visible under the fixed div due to the margin from the top of the page. Despite s ...

htmlcss

Incorporate ng-click as an attribute in AngularJS

Is there a way to include ng-click as an attribute? For example, imagine I want to add ng-click if my <li> has the class someClass: angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'}); ...

javascriptjqueryhtmlangularjs

How to Fetch Information from Database and Save it as a Variable in PHP

I am trying to extract the data stored in the level column of my database and assign it to a variable with the value 0. Here is the code snippet I have written to achieve this, where I fetch the data from the database and store it in a variable named $lev ...

phphtmlmysqlcssdatabase

`Customizing Switch Colors on Bootstrap: A Guide`

https://i.sstatic.net/alsdy.png I obtained the code from Get Bootstrap. <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> & ...

htmlcssbootstrap-4bootstrap-5

Creating dynamic web content using KaTeX and Node.js

When I attempt to display a complex formula using HTML and CSS, I encounter difficulties. Instead of the desired output, my screen is filled with confusing unicode characters. To resolve this issue, I decided to use KaTeX. I downloaded KaTeX into the dire ...

javascripthtmlnode.jskatex

Tips on using the Hover property in CSS for an element that includes both :after and :before properties

I've created a hexagon using CSS after and before properties, and now I'm attempting to add a glowing effect around the hexagon when hovering. It works perfectly for the center of the hexagon but not for the top and bottom points of the shape. ...

htmlcss

Adjust the jQuery resizable handlers on the fly

I am encountering an issue when attempting to change the handler on a resizable element. Initially, I used : $(line) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "e, w" }); N ...

javascriptjquerycsshandlerresizable

Generating a JSon output that contains HTML table data specifically meant to be seen within the fnopen callback function of a jQuery datatable

After spending countless hours searching for a solution to my problem, I decided to take matters into my own hands. The issue at hand revolves around a jQuery datatable that showcases various aspects of a resolver's case load. Claim ID Claimant Nam ...

c#jqueryasp.nethtmljson