Before Styling
<ul class="linkboxes">
<li><a href="#" title="About"><strong>About</strong><span> - </span>How my life story became a Hallmark movie.</a></li>
<li><a href="#" title="Portfolio"><strong>Portfolio</strong><span> - </span>View some wonderful work I made yesterday.</a></li>
<li><a href="#" title="Contact"><strong>Contact</strong><span> - </span>Ask me questions. I'll tell you no lies.</a></li>
</ul>
<ul class="linkboxes">
<li><a href="#" title="About"><strong>About:</strong> How my life story became a Hallmark movie.</a></li>
<li><a href="#" title="Portfolio"><strong>Portfolio:</strong> View some wonderful work I made yesterday.</a></li>
<li><a href="#" title="Contact"><strong>Contact:</strong> Ask me questions. I'll tell you no lies.</a></li>
</ul>ul.linkboxes { display: block; overflow: hidden; margin: 50px auto; padding: 10px 0 10px 10px; width: 630px; border: 1px solid #eee; }
ul.linkboxes li { display: block; width: 200px; margin-right: 10px; float: left; }
ul.linkboxes li a { display: block; border: 1px solid #ddd; background-color: #f5f5f5; text-decoration: none; padding: 10px; color: #444; }
ul.linkboxes li a:hover { border-color: #fc6; background-color: #ffc; }
ul.linkboxes li a strong { display: block; font-size: 1.5em; line-height: 1em; margin-bottom: 5px; color: #222; }
ul.linkboxes li a:hover strong { color: #f63; }
ul.linkboxes span { display: none; }