Adding “Box of Color” Behind List Links

written by: jason
Adding “Box of Color” Behind List Links

I’m not sure how to describe this, but you may have seen it in action in a sidebar. When you hover over a text link a colored background appears behind the text. It’s easy to accomplish, and I think it looks clean. So how do you do it? Here’s how.

First of all, you need a properly coded html list like so:

  1. <ul>
  2.     <li><a href="#">list item 1</a></li>
  3.         <li><a href="#">list item 2</a></li>
  4.         <li><a href="#">list item 3</a></li>
  5. </ul>
<ul>
	<li><a href="#">list item 1</a></li>
        <li><a href="#">list item 2</a></li>
        <li><a href="#">list item 3</a></li>
</ul>

The ul is the tag for an unordered list, the li is the tag for list item and the a href is an anchor tag.

And here is the css:

You will need to add styles to each of these – plus the hover state to the anchor tag – to make it work. I’ve commented the most important parts. Don’t forget to set the anchor tag to a block element. If you don’t, the color will only extend the width of the text and not the entire width of the ul.

  1. ul {
  2.     width: 300px; /*overall width of the list */
  3.     padding: 0; /*zero out the padding*/
  4.     margin: 0; /*zero out the margin*/
  5. }
  6.  
  7. li {
  8.     list-style: none; /*takes the bullet off the list item*/
  9.     padding: 5px 0px;
  10.     width: 300px;
  11.     border-bottom: 1px solid #707070;
  12.     height: 20px; /*have to give a height here and on the li a */
  13.     margin-bottom: 5px;
  14. }
  15.  
  16. li a {
  17.     font-size: 120%;
  18.     line-height: 130%;
  19.     font-family: "Century Gothic", Verdana, "Myriad Pro", sans-serif;
  20.     display: block; /*very important. Setting this to block makes sure your background expands the entire 300px and not just the width of the text */
  21.     height: 10px; /* height is need here also */
  22.     width: 300px;
  23.     padding: 5px 0 5px 5px;
  24. }
  25.  
  26. a:hover {
  27.     background: #9bb716; /*makes the background green on hover*/
  28.     text-decoration: none;
  29.     color: #fff;
  30.     width: 300px;
  31. }   
ul {
	width: 300px; /*overall width of the list */
	padding: 0; /*zero out the padding*/
	margin: 0; /*zero out the margin*/
}

li {
	list-style: none; /*takes the bullet off the list item*/
	padding: 5px 0px;
	width: 300px;
	border-bottom: 1px solid #707070;
	height: 20px; /*have to give a height here and on the li a */
	margin-bottom: 5px;
}

li a {
	font-size: 120%;
	line-height: 130%;
	font-family: "Century Gothic", Verdana, "Myriad Pro", sans-serif;
	display: block; /*very important. Setting this to block makes sure your background expands the entire 300px and not just the width of the text */
	height: 10px; /* height is need here also */
	width: 300px;
	padding: 5px 0 5px 5px;
}

a:hover {
	background: #9bb716; /*makes the background green on hover*/
	text-decoration: none;
	color: #fff;
	width: 300px;
}
Tags: , , ,

Comments are closed.