JSFiddle - React, Tailwind, and code Playground

Nice little Hover style for text hyperlinks - use in new jp.com?

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<p><a href="http://jenniferperrin.com" target="_blank">http://www.jenniferperrin.com</a></p>

<p>Have you ever wanted to use PHP in WordPress text widgets? <a href="http://jenniferperrin.com/blog/php-text-widget/" target="_blank">Here’s a neat little trick...</a></p>

<p><a href="http://jenniferperrin.com/blog/php-client-portal-client-pipeline/" target="_blank">Client Pipeline</a> is an easy to use and an effective way for freelance web developers and graphic designers &amp; small businesses to manage their clients.</p>

<p>Tool To <a href="http://jenniferperrin.com/blog/tool-to-test-your-responsive-design/" target="_blank">Test Your Responsive Design</a>. Just Enter your site URL &amp; Hit View. The site will be loaded inside a source frame and then you can manually drag the red handles to any custom resolution.<p>
    
    <p>jQuery/Javascript is great for <a href="http://jenniferperrin.com/blog/remove-duplicatesextra-characters/" target="_blank">cleaning up user-entered text in forms</a>.</p>

CSS

/* House Keeping */
body { margin: 20px; }
p { 
    margin: 20px;
    color: #222;
    font-family: 'Yanone Kaffeesatz';
    font-size: 18px;
}

/* Hyperlink Styles */
a {
    border-bottom: 1px dotted #5a7cb1;
    color: #444;
    padding: 0 1px;
    text-decoration: none;
}

a:hover {
    background-color: #efefef;
    border-bottom: 1px dotted #444;
    color: #5a7cb1;
}

JavaScript

/**
 * Nice little Hover style for text hyperlinks.
 * Inspired by CSS-Tricks
 * http://css-tricks.com
 **/