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?

Marshy

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

Leaseholder

This way feels like a hack, but I suppose it may be the only way to do it. I really feel that the ellipsis should take on the text-decoration of the element containing it. – Marshy

the ellipsis is a pseudo element here ( like :before or :after ) so it doesn't count as text. That's why the **text**-decoration not getting applied. – Leaseholder

Thanks for the hack) – Weekend

Answer 2

If some one find this, like me, and do not like the fact that the border-bottom line is too far away this code might help DEMO

a {
    display: block;
    width: 185px;
    background: beige;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #000;
    position: relative;
}

a:hover::before {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 0;
    left: 0;
    border-bottom: 1px solid black;
}

Still a hack, but you know... :)

Excitability