css - Underline an HTML ellipsis

Question

I am using text-overflow: ellipsis to clip text that is inside of a span that is inside of an anchor. The ellipsis character is not underlined when I hover which causes a small gap. Is there a way to fix this?

Answer 1

Yes, you can do this - set text-decoration: none and instead of that use border-bottom - DEMO

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;
}