CSS过渡以显示内联文本

Question

文字如何与圆形内嵌显示并将其他颜色推到一边？

示例：Fiddle

<div id="a1">
   <span><a class="c1" href="1"></a></span><div class="blue">Blue</div>
   <span><a class="c2" href="2"></a></span><div class="green">Green</div> 
   <span><a class="c3" href="3"></a></span> <div class="black">Black</div>
   </div>

Answer 1

你是否正在寻找

a {
  border-radius: 50px;
  width: 25px;
  height: 25px;
  margin:3px;
  display:inline-block;
}
.c1 {
  background-color:blue;
}
.c2 {
  background-color:green;
}
.c3 {
  background-color:black;
}
.blue,.green,.black {
  display:inline-block;
  width: 0;
  overflow: hidden;
  transition: width 0.5s;
}
a:hover + div {
  width: 50px;
  transition: width 0.5s;
}

<div id="">
  <a class="c1" href="1"></a>
  <div class="blue">Blue</div>
  <a class="c2" href="2"></a>
  <div class="green">Green</div> 
  <a class="c3" href="3"></a>
  <div class="black">Black</div>
</div>