文字底線是很常見的hover效果，可以使用許多方式呈現
以下舉例

(1) 利用偽元素

<div class="ex">
    範例文字
</div>

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.ex::after{
    content: '';
    width: 0%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s linear;
}
.ex:hover::after{
    width: 100%;
}

(2) 利用另一個DIV當作底線

<div class="ex">
    範例文字
    <div class="ex-line"></div>
</div>

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.ex-line{
    width: 0%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s linear;
}
.ex:hover .ex-line{
    width: 100%;
}

文字顏色也是很常見的hover效果，通常會搭配背景顏色更改使用，不然有些顏色會導致文字難以閱讀
以下舉例

(1) 更改顏色

<div class="ex">
    範例文字
</div>

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all .3s linear;
}
.ex:hover{
    color: #d81616;
}

(2) 利用背景顏色配合文字顏色來凸顯

<div class="ex">
    範例文字
    <div class="ex-line"></div>
</div>

.ex{
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all .3s linear;
}
.ex:hover .ex-line{
    color: #fff;
    background-color: #000;
}