Стили CSS - создаем облако тегов с задаваемым в CSS размером

[Smokey]

В свое время я уже делал подробный обзор и “палил” тему облаков тегов. Сегодня же мне хотелось бы продемонстрировать, как с помощью CSS можно задавать размер области выделения тега при наведении на него мышки.

Стили CSS - создаем облако тегов с задаваемым в CSS размером области выделения
Фрагмент HTML кода

<ul>   
 <li><a class="size1" href=#">adobe</a></li>   
 <li><a class="size2" href=#">animation</a></li>   
 <li><a class="size3" href=#">arts</a></li>   
 <li><a class="size4" href=#">bizarre</a></li>   
 <li><a class="size5" href=#">blogs</a></li>   
 <li><a class="size6" href=#">books</a></li>   
 ...и т.д.   
 </ul>

Фрагмент CSS кода

ul {   
 margin-top: 50px;   
 list-style-type: none;   
 }   
 li {   
 float: left;   
 }   
 ul li a {   
 text-decoration: none;   
 line-height: 2.3em;   
 }   
 ul li a.size1 {   
 color: #666;   
 padding: 2px;   
 }   
 ul li a.size1:hover {   
 background-color: #999;   
 color: white;   
 }   
 ul li a.size2 {   
 color: #912600;   
 padding: 12px;   
 }   
 ul li a.size2:hover {   
 background-color: #cc3500;   
 color: white;   
 }   
 ul li a.size3 {   
 color: #877900;   
 padding: 18px;   
 }   
 ul li a.size3:hover {   
 background-color: #d8c100;   
 color: white;   
 }   
 ul li a.size4 {   
 color: #1d6c01;   
 padding: 8px;   
 }   
 ul li a.size4:hover {   
 background-color: #2daf00;   
 color: white;   
 }   
 ul li a.size5 {   
 color: #004e6b;   
 padding: 6px;   
 }   
 ul li a.size5:hover {   
 background-color: #007ead;   
 color: white;   
 }   
 ul li a.size6 {   
 color: #430069;   
 padding: 24px;   
 }   
 ul li a.size6:hover {   
 background-color: #7600b9;   
 color: white;   
 }