CSS tags

0

Here”s some tags. They stretch to fit the text and change state on hover:


Here’s the code and image:

    .tags {
	margin: 0 0 5px 0;
	padding: 0;
	list-style: none;
	background-colour: transparent;
    }
    .tags li {
	display: inline;
    }
    .tags li a {
	display:block;
	float:left;
	font-size:14px;
	line-height:16px;
	height:20px;
	overflow: hidden;
	margin: 5px 0 0 0;
	padding: 4px 14px 0 26px;
	text-decoration:none;
	background:transparent url(/images/blog/tag.gif) no-repeat 0 0;
	border-right:1px solid #666666;
    }
    .tags li a:hover {
	background-position: 0 -24px;
    }
<ul class="tags">
      <li><a href="#">tag 1</a></li>
      <li><a href="#">tag whatever you like</a></li>
      <li><a href="#">tag three</a></li>
</ul>

tags

Add a comment

Leave a Comment

Your email address will not be published.