creativeLink（13）

没hover之前：

hover之后：

我们的设计思想是将标签的before设置成那一个小白点，hover的时候利用text-shadow设置成三个点

 <section class="thirteenthLink">
            <nav class="effect13">
                <a href="">beleaguer</a>
                <a href="">lassitude</a>
                <a href="">murmurous</a>
                <a href="">palimpsest</a>
                <a href="">assemblage</a>
            </nav>
        </section>

.thirteenthLink{
    background:#f19f0f; 
}
.thirteenthLink .effect13 a{
    transition: color 0.3s;
}
.thirteenthLink .effect13 a::before{
    content: "•";
    position: absolute;
    top: 100%;
    left: 50%;
    color: transparent;
    text-shadow: 0 0 transparent;
    font-size: 1.2em;
    transform: translateX(-50%);
    transition: text-shadow 0.3s,color 0.3s;
}
.thirteenthLink .effect13 a:hover::before{
    color: #fff;
    text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.thirteenthLink .effect13 a:hover{
    color:#ba7700;
}

text-shadow设置x轴的两个方向上的两个，距离10px