Link is still underlined even though text-decoration is set to none

Question

I've seen a couple of related questions on this site, but all of them seemed to be due to selector issues, but I don't think that is the issue here.
In my case, Google Chrome and Safari both tell me that the computed style for the a tags in question have text-decoration:none.
Selecting the a tags and setting text-decoration:none makes no difference because they already have text-decoration:none.
The page is styled from a few different stylesheets, including one from my blog theme, one from a namespaced import of Materialize framework and a lastly a user-defined stylesheet which I left empty (thus I haven't included CSS in this post).

Demo: http://codepen.io/prashcr/pen/RaBKGY

Here is the HTML:

    <body class="site animated fade-in-down">
     <div class="site-wrap center">

    <div class="post p2 p-responsive wrap" role="main">
      <div class="measure">
        <div class="mcss">
  <div class="container">
    <div class="row">
      <div class="col s12 m7">
        <div class="card">
          <div class="card-image waves-effect waves-block waves-light">
            <img class="activator" src="http://materializecss.com/images/office.jpg">
          </div>
          <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">
              Kanban<i class="material-icons right">more_vert</i>
            </span>
            <p><a href="#!">This is a link</a></p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
            <a href="#">This is a link</a>
          </div>
          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">
              Card Title<i class="material-icons right">close</i>
            </span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m5">
        <div class="card">
          <div class="card-image waves-effect waves-block waves-light">
            <img class="activator" src="http://materializecss.com/images/office.jpg">
          </div>
          <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">
              Camper News<i class="material-icons right">more_vert</i>
            </span>
            <p><a href="#!">This is a link</a></p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
            <a href="#">This is a link</a>
          </div>
          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">
              Card Title<i class="material-icons right">close</i>
            </span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
</body>

score 7 · Accepted Answer · answered Apr 22 '16 at 05:02

7

It is not a text-decoration there. It's a background-image. Chrome dev tools shows this:

a {
    color: #0076df;
    background-image: linear-gradient(to top, transparent 13%, rgba(0, 118, 223, 0.8) 13%, rgba(0, 118, 223, 0.8) 18%, transparent 17%);
    text-shadow: white 1px 0px 0px, white -1px 0px 0px;
}

When I disablebackground-image property in dev tools, the blue line disappears.

answered Apr 22 '16 at 05:02

Julia

1,301
1
14
29

You beat me by like 20 seconds, @Julia. – Andy Hoffman Apr 22 '16 at 05:04
And me by about 10 seconds more :P Good work (Or Good speed) – Pratyush Vashisht Apr 22 '16 at 05:06
3

finally once i am succeed in writing the answer first :D – Julia Apr 22 '16 at 05:09

score 3 · Answer 2 · answered Apr 22 '16 at 05:12

3

Ok, probably this will help you

.mcss a:active, .mcss a:hover {background-image: none;} .mcss a {color: #039be5;background-image: none;text-decoration: none;}

answered Apr 22 '16 at 05:12

Sus Hill

286
5
18

score 0 · Answer 3 · answered Apr 22 '16 at 05:06

0

Add background-image: none; into .mcss a

.mcss a {
    color: #039be5;
    text-decoration: none;
    background-image: none;
}

answered Apr 22 '16 at 05:06

Ismail Farooq

6,309
1
27
47

Link is still underlined even though text-decoration is set to none

3 Answers3