• Skip to main content
  • Skip to footer

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!

182
SHARES
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.
Email Address Subscribe Now

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 *

Footer

Blog Categories

Blog Archives

Blog Topics

.com 2.7 2008 addons AlphaLab Amazon applications apps April Fools autodidactic backup bailouts Blogging blogs bootstrapping CMS college CSS Del.icio.us efficiency email Entrepreneurship Facebook Firefox Gmail Google Google Apps Grove City College internet entrepreneurship LinkedIn links PCPGH3 plugins reputation management RSS SEO Seth Godin shared Social Bookmarking Social Media technology themes website Wikipedia WordPress

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

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

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.