logo dark logoo light logo
  • Home
  • About Us
  • Our Services
    • WordPress Support Fixing @Instant
    • WordPress Speed Optimization
    • WordPress Site Migration
    • WordPress Theme Customization
  • Contact US
logo dark logoo light logo
  • Home
  • About Us
  • Our Services
    • WordPress Support Fixing @Instant
    • WordPress Speed Optimization
    • WordPress Site Migration
    • WordPress Theme Customization
  • Contact US
mobile logo
  • Home
  • About Us
  • Our Services
    • WordPress Support Fixing @Instant
    • WordPress Speed Optimization
    • WordPress Site Migration
    • WordPress Theme Customization
  • Contact US

If an link is a PDF file, style accordingly

Solution:

This can be done with just CSS and it supports all major browsers including IE7+. There is no need to add any extra classes or <img> elements.

The CSS below will target any link to a .pdf, change the link color, give it some left padding and apply a background image in the space created:

a[href$=".pdf"] {
    background: url(images/pdf-icon.png) no-repeat 0 50%;
    padding-left: 25px;
    color: red;
}

Demo: http://jsfiddle.net/xuBpG/1/

✨ Unmatched Support for WordPress, BigCommerce & Shopify — Anytime, Anywhere.

  • Custom WordPress Development
  • Woocommerce Support
  • WordPress Speed Optimization
  • WordPress Plugin Customization
  • WordPress Support
  • Malware Removal
  • Site Upgrade
  • One-time Fix
  • On Page SEO
  • Privacy Policy

Web Centauri Technologies | © | All Rights Reserved |