Find Empty, Open in a New Tab, and # Links
Use this cascading style sheet (CSS) to find empty links, links that open in a new tab, and links with the # sign. You’ll only see the style when you are logged into the website.
Add this code to Edit CSS under Appearance.
/* ----- Check links ----- */
/* Checks for empty links & only shows when you are logged into the website */
.logged-in a:not([href]) {
outline: 8px solid rebeccapurple !important;
}
/* Checks for links that open in a new tab */
body.logged-in a[target=_blank] {
color: #000000;
background-color: yellow;
border: 5px #000000 solid;
padding: 8px;
}
body.logged-in a[target=_blank]:after {
content: "Edit the link to toggle off Open in a new tab.";
color: black;
border: 3px red solid;
padding: 5px;
font-size: .7em;
font-weight: bold;
font-style: italic;
}
/* Checks for pound sign/hashtag for a link */
.logged-in a[href="#"] {
background-color: rebeccapurple;
}
/* ----- END Check links ----- */
This code is different from the one used on Open in new tab.
Use Open in new tab code if you want links to open in new tab and check for noreferrer noopener.
Use this code if you do not want links to open in a new tab.
Examples
URL Defense & SafeLinks Links
These are links copied from email before they are rendered in a browser. They still contain ITS’s email security measures.
Add this code to Edit CSS under Appearance.
/* Check for urldefense links */
.logged-in a[href*="urldefense.com"],
.logged-in a[href*="nam12.safelinks.protection.outlook.com"] {
background-color: rebeccapurple;
}
/* END Check for urldefense links */ Examples
Read more of A beginner’s guide to link and text accessibility.
Find stage.web.wsu.edu links
Use this CSS to links still using stageweb.wsu.edu. You’ll only see the style when you are logged into the website.
Add this code to Edit CSS under Appearance.
/* ----- Check for stage links ----- */
/* Checks for stage.web.wsu.edu links once website is launched (published) */
.logged-in a[href*="stage.web.wsu.edu"] {
background-color: rebeccapurple;
}
/* ----- END Check for stage links ----- */Examples
What! Is that purple?
No, it isn’t that purple. It is RebeccaPurple which has a really unique and heartwarming meaning in the CSS and web design world.