How to Remove Underline from HyperLink?

Question

I am trying to create an email signature that has a website link. However, the link appear as underlined. I tried many options to remove the underline from the website link but failed. Any Idea to solve this?

<html>
  <head>
    <title>Email Signature</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  </head>
  <body>
    <table
      style="
        width: 424px;
        font-size: 10pt;
        font-family: Arial, sans-serif;
        line-height: normal;
      "
      cellpadding="0"
      cellspacing="0"
      border="0"
    >
      <tbody>
        <tr>
          <td
            style="padding-right: 15px; border-right: 1px solid #317a00;"
            width="150"
            style="width: 150px; vertical-align: top;"
            valign="top"
            align="center"
          >
            <a href="{logoURL}" target="_blank"
              ><img
                width="81"
                border="0"
                alt="Logo"
                style="border: 0; max-width: 150px;"
                src="logo.png"
            /></a>
          </td>

          <td
            style="padding-left: 15px; vertical-align: top; font-size: 9pt;"
            valign="top"
          >
            <strong
              style="
                font-size: 10pt;
                font-family: Arial, sans-serif;
                color: #317a00;
              "
              >{firstName} {lastName}</strong
            ><br />
            <span
              style="
                font-size: 10pt;
                font-family: Arial, sans-serif;
                color: #000000;
                padding-bottom: 5px;
              "
              >{title}</span
            ><br />

            <br />

            <span style="font-family: Arial, sans-serif; color: #000000;"
              ><span style="font-weight: bold; color: #317a00;">T: </span
              >{phone}<br
            /></span>
            <span style="font-family: Arial, sans-serif; color: #000000;"
              ><span style="font-weight: bold; color: #317a00;">M: </span
              >{mobile}<br
            /></span>
            <span style="font-family: Arial, sans-serif; color: #000000;"
              ><span style="font-weight: bold; color: #317a00;">E: </span
              >{email}<br
            /></span>

            <br /><span
              ng-if="showField('company')"
              style="
                font-size: 9pt;
                font-family: Arial, sans-serif;
                color: #000000;
              "
              >{company}</span
            >

            <br /><br />
          </td>
        </tr>

        <tr>
          <td align="center" style="border-right: 1px solid #317a00;">
            <a href="{instagramURL}" target="_blank"
              ><img
                alt="Instagram icon"
                border="0"
                width="18"
                height="18"
                style="border: 0; height: 18px; width: 18px;"
                src="it.png" /></a
            >&nbsp;
            <a href="{pinterestURL}" target="_blank"
              ><img
                alt="Pinterest icon"
                border="0"
                width="18"
                height="18"
                style="border: 0; height: 18px; width: 18px;"
                src="pt.png"
            /></a>
          </td>
          <td style="padding-left: 15px;">
            <a href="http://{website}" target="_blank"
              ><span
                style="
                  font-size: 9pt;
                  font-family: Arial, sans-serif;
                  color: #317a00;
                  font-weight: bold;
                "
                >{website}</span
              ></a
            >
          </td>
        </tr>

        <tr>
          <td width="424" style="width: 424px; padding-top: 15px;" colspan="2">
            <a href="{bannerURL}" target="_blank" rel="noopener"
              ><img
                border="0"
                src="banner.png"
                alt="Banner"
                style="max-width: 424px; height: auto; border: 0;"
            /></a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

This the answer: https://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks — Always Helping, Jul 10 '20 at 05:52
By default there is some styling in the links, If you don't want and use your styling then you can remove the default styling by : `text-decoration: none;` — Vidit Varshney, Jul 10 '20 at 06:10
There may be some styling which creates conflicts then you have to use `text-decoration: none !important;` By this, I meant that you mark this property as important others styling will be disabled and this will be applied. — Vidit Varshney, Jul 10 '20 at 06:14

RoteS · Accepted Answer · 2020-07-10T05:54:09.610

2

This should do it:

<a href="http://{website}" style="text-decoration: none;" target="_blank"><span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span></a>

more info on styling links in css can be found here: https://www.w3schools.com/css/css_link.asp

edited Jul 10 '20 at 05:54

answered Jul 10 '20 at 05:52

RoteS

1,405
13
10

2

This is not considered an answer as its a duplicate and is commented above as well. – Always Helping Jul 10 '20 at 05:53

score 0 · Answer 2 · answered Jul 10 '20 at 05:51

Use Text-decoration: none; you can use it in css and inline too.

/*a {text-decoration: none;}*/

<html><head><title>Email Signature</title>
<meta content="text/html; charset=utf-8"http-equiv="Content-Type">
</head>
<body>
<table style="width: 424px; font-size: 10pt; font-family: Arial, sans-serif;; line-height:normal;" cellpadding="0" cellspacing="0" border="0">
<tbody>
    <tr>
        <td style="padding-right:15px; border-right:1px solid #317a00;" width="150" style="width:150px; vertical-align: top;" valign="top" align="center">
                <a href="{logoURL}" target="_blank"><img width="81" border="0" alt="Logo" style="border:0;max-width:150px" src="logo.png"></a>
        </td>
        
        <td style="padding-left:15px; vertical-align: top; font-size:9pt" valign="top">
    
            <strong style="font-size:10pt; font-family: Arial, sans-serif;; color: #317a00;;">{firstName} {lastName}</strong><br>
            <span style="font-size:10pt; font-family: Arial, sans-serif;; color: #000000;; padding-bottom:5px;">{title}</span><br>

            <br>
            
            <span  style="font-family: Arial, sans-serif;; color:#000000;;"><span style="font-weight:bold; color:#317a00;; ">T: </span>{phone}<br></span>
            <span  style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">M: </span>{mobile}<br></span>
            <span  style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">E: </span>{email}<br></span>

            <br><span ng-if="showField('company')" style="font-size: 9pt; font-family: Arial, sans-serif;; color: #000000;;">{company}</span>
                
            <br><br>

        </td>
    </tr>
    
    <tr>
        <td align="center" style="border-right:1px solid #317a00;">
                
                <a href="{instagramURL}" target="_blank"><img alt="Instagram icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="it.png"></a>&nbsp;
                <a href="{pinterestURL}" target="_blank"><img alt="Pinterest icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="pt.png"></a>    
        </td>
        <td style="padding-left:15px;">
            <a href="http://{website}" target="_blank" style="text-decoration: none;"><span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span></a>
        </td>       
    </tr>   

    
    <tr>
        <td width="424" style="width:424px;padding-top:15px;" colspan="2">
            <a href="{bannerURL}" target="_blank" rel="noopener"><img border="0" src="banner.png" alt="Banner" style="max-width:424px; height:auto; border:0;"></a>
        </td>
    </tr>
    
</tbody>
</table>

</body>
</html>

This is not considered an answer as its a duplicate and is commented above as wel — Always Helping, Jul 10 '20 at 05:53

score 0 · Answer 3 · answered Jul 10 '20 at 05:52

0

Have you tried this? : text-decoration:none;

answered Jul 10 '20 at 05:52

PouRia Bonyadgozar

26
4

This is not considered an answer as its a duplicate and is commented above as well. – Always Helping Jul 10 '20 at 05:53

score 0 · Answer 4 · answered Jul 10 '20 at 05:53

0

Add a style attribute to the anchor tag and add the text-decoration to none. Example:

style="text-decoration: none"

answered Jul 10 '20 at 05:53

Tofazzal haque

544
4
10

This is not considered an answer as its a duplicate and is commented above as well – Always Helping Jul 10 '20 at 05:54

score 0 · Answer 5 · answered Jul 10 '20 at 05:57

0

try this CSS style.

a,a:hover{text-decoration: none;}

answered Jul 10 '20 at 05:57

chigs

178
2
12

score 0 · Answer 6 · answered Jul 10 '20 at 06:05

0

Add inline CSS to the anchor tag

style="text-decoration: none;

answered Jul 10 '20 at 06:05

Murtaza Lehri

1
1

How to Remove Underline from HyperLink?

6 Answers6