Link Overline Underline

Style your navigation. This simple interaction adds a line above and below the text when hovered, giving a "bracketed" or "sandwiched" look.

Menu Item 1 Menu Item 2

Copy the Script

<script>
function overUnder(el) {
    el.style.textDecoration = "overline underline";
}

function noLines(el) {
    el.style.textDecoration = "none";
}
</script>

<a href="#" onmouseover="overUnder(this)" onmouseout="noLines(this)">Sandwich Link</a>

Frequently Asked Questions

It modifies the `text-decoration` CSS property. Standard links are `underline`, but CSS allows `overline underline` to be applied simultaneously.

Yes. You can combine this with `text-decoration-color` to make the lines red while the text remains black.

Yes. `text-decoration: overline underline` is a standard CSS property supported by all major browsers going back decades.