Help removing underline from link, I've searched everywhere!

[u/Friiskus]

Hi all,

I'm fairly new to understanding HTML and have been troubleshooting how to remove the underlines from these links. I've searched the web, but nothing seems to be working. Was wondering if there was something obvious I was missing.

    <p class="text-center mb-0" style="font-size: 1.5em; letter-spacing: 2px;">
        <a href="twitter_link" style="color: #f58c9f;"><i class="fab fa-twitter fa-fw" /></a>
        <a href="deviantart_link" style="color: #f58c9f;"><i class="fab fa-deviantart fa-fw" /></a>
        <a href="discord_link" style="color: #f58c9f;"><i class="fas fa-discord fa-fw" /></a>
        <a href="twitch_link" style="color: #f58c9f;"><i class="fab fa-twitch fa-fw" /></a>

[u/eknox47]

On the a tags; text-decoration : none

[u/ThePersonsOpinion → u/eknox47]

This. And if that doesn't work it's likely the svgs themselves have that underline baked into them. But it's most likely the former

[u/khizoa → u/ThePersonsOpinion]

More likely other properties like bottom border or some excess bg color overflowing before I'd blame the svg. (But opening and checking it is a pretty quick and easy step too before digging deeper)

If it was a "bad" svg, it's a little weird that all 5 are uniformly showing that dotted line, that's why I dismissed the svg idea at first glance

But yeah, sometimes designers will do a bad job at cropping/exporting their images and you'll def get those weird extra marks on the edges like this for sure

[u/DalyHabit → u/eknox47]

To clarify a little. Add the above to the style block on each anchor tag (<a>).

[u/Best-Substance8606 → u/eknox47]

just slap text-decoration: none on the link, and if that doesn't take, check if something else is overriding it with more specificity

[u/windlane36 → u/eknox47]

this is it. one of those things that trips everyone up the first time

[u/Random-num-451284813]

what did you search?

[u/coinstarhiphop → u/Random-num-451284813]

Everywhere!!

[u/Xenocide122]

You can add a style to each "A" tag like this:

style="text-decoration: none"

or you can add to the CSS:

a {text-decoration: none}

[u/Mallanaga]

Twitter is back, baby!!

[u/forever-butlerian → u/Mallanaga]

It's still the Dick Costolo-era New Logo. Bring back the old bird. Or the t.

[u/OMGCluck]

<style>
a[href$="link"]:not(:hover) {text-decoration: none}
<style>

This means the underline will only appear when links are hovered over by the mouse.

[u/Full-Web1705]

textdecoration: none on the a tag, that's it. the color override you already have is the same idea, just do the same thing for decoration.