<div class="wrapper">
    <article class="flow">
      <h1>Attribute selectors</h1>
      <figure class="callout">
          Using an attribute selector that looks for an attribute value that’s
          suffixed with a pattern (<code>[attr$=value]</code>) is handy for looking
          for certain file types in a link’s <code>href</code> attribute.

          In this example, we’re using that approach to add an icon for the file type.

          <a href="my-image.jpg">An example image</a>
          <a href="my-document.pdf">An example document</a>
          <a href="my-document.pdf">Another example document</a>
a[href$=".pdf"]::before {
  background-image: url(https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/fc7bLiJYf5US6QxTOKsF.png);

a[href$=".png"]::before {
  background-image: url(https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/N79qCc0c06217YT4ofYM.png);

a::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
  background-size: 100%;
  margin-inline-end: 0.5em;
  opacity: 0.8;

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.