Did you know that CSS allows you to consistently find and style all the links that end in a certain extension on your website or webpage? Cool, right? In addition, CSS can search for exact URL matches and query whether a term is contained in a URL.
Styling PDF links with CSS selectors (and other file types)
When would this CSS technique be useful? Using the CSS attribute HREF to consistently style all of a website’s links to PDFs, Word docs, Excel docs, or PowerPoint files could be extremely useful if you’re adding CSS to a Content Management System (CMS) for local, state, or federal governments or academic and research organizations where many papers and resources are shared as these type of source files.
The programmatic consistency this CSS adds to a system would also be very useful in scenarios where many people add content, allowing for great variation in how content creators indicate file types.
What’s a useful example of using the CSS attribute HREF?
Signaling linked PDF files with (PDF)
A simple use of the CSS attribute HREF is to find file links that end in .pdf and to add the words PDF in parenthesis after the link.
/* Add (PDF) after all links that end with .pdf */
a[href$=".pdf"]::after {
content: " (PDF)";
}The above CSS reads, “if the <A HREF=””> ends with .pdf, then after the <A HREF=””>, add a space and (PDF). Note: the $ means “ends with.”
As you’ll see in the CodePen below, instead of just displaying “course offerings” as shown in the HTML, the CSS appends (PDF) to the end of the link.
Adding an SVG after all PDF links via CSS
You can use CSS to include an SVG before or after a link using ::before or ::after. I used the solid file-pdf from Font Awesome for the following code example. Click the code icon </> to copy the SVG code for any Font Awesome icon from the Font Awesome website.
#Solid file-pdf Font Awesome SVG copied code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H296 272 184 160c-35.3 0-64 28.7-64 64v80 48 16H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM160 352h24c30.9 0 56 25.1 56 56s-25.1 56-56 56h-8v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V448 368c0-8.8 7.2-16 16-16zm24 80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8v48h8zm88-80h24c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H272c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm24 128c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16h-8v96h8zm72-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H400v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H400v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V432 368z"/></svg>To successfully display the SVG code from your CSS, you’ll need to add a few additional items to your SVG code and manage your single and double quotes.
Step 1: Use single quotes to wrap the content in your URL(). Add the data and charset information. See the bolded areas in the code box below. Include a comma and paste your SVG code after the comma and before your closing single quote.
Step 2: Add width, height, and an optional fill to the <SVG> declaration. As a reference, see the bolded text in the code box below.
#STEP 1
/* Add SVG after all links that end with .pdf */
a[href$=".pdf"]::after {
margin:0 0 0 3px;
content: url( 'data:image/svg+xml;charset=UTF-8, ');
}
#STEP 2
/* Final CSS with copied/pasted SVG -- Add SVG after all links that end with .pdf */
a[href$=".pdf"]::after {
margin:0 0 0 3px;
content: url( 'data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="18" height="18" fill="blue"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H296 272 184 160c-35.3 0-64 28.7-64 64v80 48 16H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM160 352h24c30.9 0 56 25.1 56 56s-25.1 56-56 56h-8v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V448 368c0-8.8 7.2-16 16-16zm24 80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8v48h8zm88-80h24c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H272c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm24 128c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16h-8v96h8zm72-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H400v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H400v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V432 368z"/></svg>');
}
CSS Attribute HREF with Pseudo-elements using Font Awesome Unicode
Style PDFs, PowerPoint, Word, and Excel documents, too
As an alternative to copying and pasting an SVG’s code into the CSS Content, you can use the Unicode provided by services like Font Awesome.
First, make sure to add Font Awesome’s CSS styles to your project. There are several ways to do this, so pick the best one for you: https://fontawesome.com/docs/web/#web-setup.
Next, pick your icons and grab their Unicode. You’ll use them in your CSS. You can stylize all the types of documents that users might add to your website: ppt, pptx, doc, docs, pdf, xls, and more!
CSS Attribute HREF by Contains or Matching
You can use the CSS HREF attribute to check for more than just what the link ends with. You can also check for an exact match or search if your term is contained in the link. The * is used as a wildcard indicating if the term is contained in the HREF; the equal sign searches for an exact match and is case-sensitive.
/* <a> elements with an href containing "example" */
a[href*="example"] {
content: " (contains example)";
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"]
{
content: " (example.org)";
}
There are even more ways to attribute value match; explore the additional examples from this StackOverflow.
E[foo] an E element with a "foo" attribute (CSS 2)
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2)
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3)
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3)
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3)
E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)Additional Resources
- Explore the MDN Web Docs for CSS Attribute Selectors
- Chris Coyier discusses PDF Bombs on CSS Tricks
- The Angular Wiki has a great trouble-shooting guide for adding Font Awesome icons via CSS content
Another favorite CSS trick is hiding unwanted horizontal scroll bars; take a look!
