• 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 https://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!

LinkedinShareTweetSubscribe to BlogEmail

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

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

Related

Reader Interactions

Leave a Reply Cancel reply

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

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

  • Home
  • LimeCuda.com
  • LimeCuda Portfolio
  • FewerThanThree.com
  • Sitemap