Efecto subrayado a lápiz con css

Muchas veces he visto un efecto en páginas web en las que ponian sus enlaces con un subrayado hecho a lápiz como este.

Pues esta tarde lo he vuelto a ver y me ha entrado curiosidad por saber como lo hacen, así que he inspeccionado el código con firebug y la verdad es que no es muy complicado, simplemente poniendo este código css en el template de mi theme de wordpress obtengo este efecto:

background:transparent url(images/link.png) repeat-x scroll 100% bottom;
padding-bottom:3px;
text-decoration:none;
 }

Con este código le estoy diciendo que le ponga a los enlaces una imagen de fondo link.png abajo y que la repita horizontalmente, le doy un poco de padding abajo , para que la imagen no se quede debajo del texto, y por ultimo le quitamos el subrayado que traen los enlaces por defecto con la regla “text-decoration:none”.

A partir de ahora mis los enlaces aparecerán con este efecto de subrayado tan original.

Por cierto la imagen de fondo es esta :