使用伪类before和attr（class）配合使用，实现图标样式。

我们可以使用伪类beform和content中的attr(class)属性来完成，图标样式的实现。接下来让我们一起来看看的怎么实现的。

• 我们先打个结构，写个div给class类名link2，在里面写几个a标签。

<div class="link2">
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>
   </div>

• 在a标签中给class类名，不过这类名就是一些图标啊，小表情啊,不过表情需要用window10里面的输入法来完成。

		<a class="√" href="#">Accept</a>
       <a class="✘" href="#">Decline</a>
       <a class="☆" href="">五角星</a>
       <a href="#" class="㊣">圈中正</a>

	<a href="#" class="😀">笑脸</a>
    <a href="#" class="😭">哭</a>

• 在用before伪类里面的属性来实现。

   .link2 a:before {
        content: attr(class);
        background: rgba(0, 0, 0, .375);
        display: inline-block;
        width: 2.8em;
        height: 2.8em;
        margin-right: .875em;
        text-align: center;
    }

然后让我们来看一下实现后的效果图是什么样子的，之后我们的来说一下它是怎么通过attr（class）属性来实现的。

这是放大后的样式：

attr要配合伪类来使用
所以我们在a后面来一个before 伪类
伪类一定要配合content 来使用 ，我们在content后面添加 attr(class)
这样 就可以选中让content 中的内容变成 下面的 class 的值
接下来就像给字体设置一样给他设置大小 背景色 颜色（只有IE可以，因为谷歌和火狐之类的浏览器有着给只有的图案默认的样式，我们无法修改他颜色）

  /*伪对象选择符 a 标签的样式*/
    .link2 a {
        font-weight: bold;
        line-height: 2.8;
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
        display: inline-block;
        margin: .25em;
        padding-right: 1em;
        border-radius: .25em;
        overflow: hidden;
    }

  /* 伪类的样式 */
    .link2 a:before {
        content: attr(class);
        background: rgba(0, 0, 0, .375);
        display: inline-block;
        width: 2.8em;
        height: 2.8em;
        margin-right: .875em;
        text-align: center;
    }

/* a 标签的背景颜色 */
    .link2 .√{
        background: #090;
    }
    
    .link2 .✘ {
        background: #c00;
    }
    .link2 .☆ {
        background: #c00;
    }
    .link2 .㊣ {
        background: #c00;
    }
    .link2 .😀{
        background: #c00;
        font-size: 50px;
    }
    .link2 .😭{
        background: #c00;
    }