Menu
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>
595
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.
176
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;}
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
