Simple Link Hover Area

The Code:

<html>
<head>
<title>Simple Link Hover Area</title>        
<style>
/*GLOBAL STYLING*/
/*BOX STYLE*/
.linkBox {
  display: block;
  position: relative;
  outline: solid thin black;
  width: 98px;
  height: 98px;
  font: normal 14px verdana, sans-serif;
  margin-bottom: 10px;
  line-height: 92px;
  text-align: center;
  background-color: rgba(0,0,0,.5);
}
/*LINK ACTIVE/INACTIVE STYLE*/
.linkBox a {
  text-decoration: none !important;
  color: black !important;
}
.linkBox a:hover {
  color: white !important;
}

/*LINK BOX BACKGROUND COLORS*/
.linkBox.none {
  background-color: rgba(0,0,0,.65);
}
.linkBox.red {
  background-color: rgba(255,0,0,.65);
}
.linkBox.green {
  background-color: rgba(0,255,0,.65);
}
.linkBox.blue {
  background-color: rgba(0,0,255,.65);
}

/*LINK HOVER AREA CODE EXAMPLES*/
.linkBox .example1 {
  padding-top: 38px;
  padding-right: 12px;
  padding-bottom: 43px;
  padding-left: 13px;
}
.linkBox .example2 {
  display: block;
  width: 98px;
  height: 98px;
 }
.linkBox .example3:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 98px;
  height: 98px;
  background-color: transparent;
  z-index: 0;
}

/*CSS FOR TEXT DISPLAY*/
.linkBox:after {
  position: absolute;
  content: "";
  top: 0;
  left: 110px;
  height: 98px;
  width: 550px;
  color: black;
  font: normal 14px verdana, sans-serif;
  text-align: left;
  margin-top: 0px;
  white-space: pre-wrap;
}
.linkBox.none:after {
  content: "BOX STYLE & LINK ACTIVE/INACTIVE STYLE applied to all boxes. \a LINK BOX BACKGROUND COLORS are assigned to individual boxes. \a \a Example 0:\a Hover area is limited to text hover only.";
}
.linkBox.red:after {
  content: "Example 1:\a Padding is applied to expand the hover area for the link anchor to fill the entire box. The padding is not uniform and fits no logical pattern. This method is not recommended.";
}
.linkBox.green:after {
  content: "Example 2:\a The display is set to block, with a height and width of 98px. The height and width match the height and width of the GLOBAL STYLING. If this method were to be used, height and width for both \".linkBox\" and \".linkBox a\" could share the rules to apply these dimensions.";
}
.linkbox.blue:after {
  content: "Example 3:\a A \"before\" pseudo element is created. The element positon is absolute with position coordinates of top: 0, left: 0. The dimensions of the pseudo element are set to height and width of 98px.";
}
</style>
</head>
    
<body onload="prettyPrint()">
  <div class="navBox">
    <ul>
       <li class="linkBox none"><a class="example0" href="http://ohnemitleid.tumblr.com/Simple Link Hover Area">Example 0</a>
      <li class="linkBox red"><a class="example1" href="http://ohnemitleid.tumblr.com/Simple Link Hover Area">Example 1</a>
      <li class="linkBox green"><a class="example2" href="http://ohnemitleid.tumblr.com/Simple Link Hover Area">Example 2</a>
      <li class="linkBox blue"><a class="example3" href="http://ohnemitleid.tumblr.com/Simple Link Hover Area">Example 3</a>
    </ul>
  </div>
<body>
</html>