html - HTML 省略記号に下線を引く

Question

text-overflow: ellipsisアンカーの内側にあるスパンの内側にあるテキストをクリップするために使用しています。ホバーすると、省略記号の文字に下線が引かれず、小さなギャップが生じます。これを修正する方法はありますか？

Answer 1

はい、これを行うことができます-設定しtext-decoration: noneて、その使用の代わりに-DEMOborder-bottom

a {
    display: block;
    width: 185px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;

    border-bottom: 1px solid transparent;
}

a:hover {
    border-bottom: 1px solid #000;
}