css3 学习之 attr()

a::before {
    color: attr(data-color color, red);
}

a::before {
    content: "Hi " attr(data-hover);
}

.box {
    font-size: 55px;
    overflow: hidden;
    position: relative;
}
.box span {
    display: inline-block;
    position: relative;
    transition: transform 0.3s;
}
.box span:first-child {
    color: #666;
}
.box span:nth-child(2) {
    color: #daa520;
}
.box span:nth-child(2)::before {
    bottom: 105%;
    color: #666;
}
.box span:first-child::before {
    top: 105%;
    color: #daa520;
}
.box span:first-child::before,
.box span:nth-child(2)::before {
    position: absolute;
    content: attr(data-hover);
}
.box:hover span:first-child {
    transform: translate3d(0, -105%, 0);
}
.box:hover span:nth-child(2) {
    transform: translate3d(0, 105%, 0);
}

<div class="box">
    <span data-hover="my">my</span>
    <span data-hover="friend">friend</span>
</div>