How to Target File Extensions in CSS

[href$=".pdf"]:before {
  content: "📜";
}

// Selects an href with a specific value
[href="https://webtips.dev"]:before {
    content: "👨‍💻";
}

// Selects an href which begins with "https"
[href^="https"]:before {
    content: "↖️";
}

// Selects an href which contains the word "download"
[href*="download"]:before {
    content: "📥";
}

// Selects an href which contains the word "insensitive", case-insensitively
[href*="insensitive" i]:before { ... }

// Selects an href which contains the word "SeNsItIve", case-sensitively
[href*="SeNsItIve" s]:before { ... }

// Selects an href which begins with "https" and ends with ".dev"
[href^="https"][href$=".dev"]:before {
    content: "👨‍💻";
}