仿开心标签

在网上看到篇关于 “仿开心标签”的文章，于是也自己试了下,做了些修改。

a{ text-decoration:none;}
.impress,.impress_in{ margin:0; padding:0;border:1px solid #fff; color:#fff; font-size:12px;}
.impress{white-space:nowrap; float:left; position:relative; padding:3px 8px 3px 3px;}
.impress .impress_in{display:none; cursor:pointer;}
.impress:hover{background-color:#E60314; color:#fff; text-decoration:none; z-index:1;}
.impress:hover .impress_in{
display:inline;
 background-color:#E60314; position:absolute; left:-1px; top:-1px;  
 padding:3px 8px 3px 3px;
 padding:4px 8px 2px 3px\0;
}
.impress_c1,.impress_c1 .impress_in{background-color:#E60314;}
.impress_c2,.impress_c2 .impress_in{background-color:#E92938;}
.impress_c3,.impress_c3 .impress_in{background-color:#EE5663;}
.impress_c4,.impress_c4 .impress_in{background-color:#F3888E;}
.impress_c5,.impress_c5 .impress_in{background-color:#333333;}
.impress_c6,.impress_c6 .impress_in{background-color:#666666;}
.impress_c7,.impress_c7 .impress_in{background-color:#999999;}
.impress_triangle{display:inline-block; width:5px; height:14px; line-height:14px; margin-bottom:-4px; font-family:'宋体'; text-indent:-7px; overflow:hidden;}

<a href="javascript:" class="impress impress_c1">
    <span class="impress_in">仿开心标签仿开心标签仿开心标签</span>仿开心 <span class="impress_triangle">◆</span>
</a>
<a href="javascript:" class="impress impress_c2">仿开心标签</a>
<a href="javascript:" class="impress impress_c3">
    <span class="impress_in">仿开心标签！！！！</span>仿开心 <span class="impress_triangle">◆</span>
</a>
<a href="javascript:" class="impress impress_c4">仿开心标签</a>
<a href="javascript:" class="impress impress_c5">仿开心标签</a>
<a href="javascript:" class="impress impress_c6">仿开心标签</a>
<a href="javascript:" class="impress impress_c7">仿开心标签</a>