• Skip to main content

Blake Imeson

Web Entrepreneur | WordPress Geek

  • Home
  • About Blake
  • Connect with Me
  • Contact

Blake Imeson / March 31, 2011

Style Wikipedia Links Automatically – CSS and RegEx

I recently got the idea to have all my external links to Wikipedia have a little “W” icon next to them in order to indicate that the links went to Wikipedia.

The solution I came up with is to use some CSS and Regular Expressions to automatically add the image to any URLs that have http://en.wikipedia.org/ in them.

Here is a link to Wikipedia. (if you are not viewing my blog on a modern browser like Chrome/Firefox this may not work)

Here is an image in case you can’t see.

Wikipedia icon

 

/* Wikipedia */
a[href^="http://en.wikipedia.org"]
{
padding-right: 15px;
background: url("/images/wikipedia.png") no-repeat scroll right top transparent;
}

 

You can download my little “W” icon at http://www.blakeimeson.com/images/wikipedia.png

I am sure there may be a more elegant and versatile solution to this, if you know of a way to do this better please comment below!

Share this:

  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Related

Filed Under: Tech Tagged With: CSS, icon, RegEx, Wiki, Wikipedia

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyleft © 2008–2019 Blake Imeson · Powered by WordPress of course

  • Home
  • LimeCuda.com
  • LimeCuda Portfolio
  • FewerThanThree.com
  • Sitemap
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.