神奇的纯CSS图标-前端开发博客

使用纯CSS的伪元素来创建简单的图标，这是一个比较有创意的做法，正如你在本站看到的评论数图标就是用:before和:after来制作的，下面分享一个国外的朋友制作了84个常用图标。

制作说明

该代码为实验性代码，不适应用在生产环境中，更多是作为一个练习性的作品，兼容: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

pure-css-gui-icons

代码思路：

主要是通过设置元素为position:relative;设置:before 和 :after为position:absolute;然后通过CSS相关的background、border、border-radius、transform:rotate()、和z-index来交叉生成，让我们不得不感叹神奇的CSS世界。来看看其中一个是怎么写的。

HTML代码：

<ul>
  <li class="power"><a href="#non">Power</a></li>
  <li class="play"><a href="#non">Play</a></li>
  <li class="stop"><a href="#non">Stop</a></li>
  <li class="pause"><a href="#non">Pause</a></li>
</ul>

CSS代码：

.expand a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 5px;
  height: 0;
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -4px;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.expand a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  border-width: 3px 0 0 3px;
  border-style: solid;
  border-color: #c55500;
  margin-top: -6px;
}

.expand a:hover:before,
.expand a:focus:before,
.expand a:active:before {
  border-color: transparent #730800;
}

.expand a:hover:after,
.expand a:focus:after,
.expand a:active:after {
  border-color: #730800;
}