I have a style sheet that provides special styling for all <A> elements:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
However, I don't want to apply this styling to <A> elements that serve as page anchors (e.g. elements with a name attribute.) So, I create another class to override the general rule for <A> elements:
.anchor-text {
}
.anchor-text a:hover {
text-decoration: none;
}
I then apply it like this:
<a href = "">
A Hyperlink (this should underline on hover)
</a>
<a class='anchor-text' name='foo'>
Anchor text (this should NOT underline on hover)
</a>
However, using both Chrome and Firefox, BOTH the link text and the anchor text show an underline when I hover over them. So, why is the anchor-text style class not overriding the general rule for <A> tags?
!important isn't the problem. It's because your selector was .anchor-text a:hover instead of .anchor-text:hover
Here's a JSFiddle
CSS
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.anchor-text {
}
a.anchor-text:hover {
text-decoration: none;
}
HTML
<a href = "">
A Hyperlink (this should underline on hover)
</a>
<a class="anchor-text" name="foo" href="">
Anchor text (this should NOT underline on hover)
</a>
If you want it to work without a need to use a class, you can use:
a[name]:not([name='']) {
text-decoration: none !important;
}
Fiddle: http://jsfiddle.net/Et389/
fiddle
a.anchor-text:hover {
text-decoration: none;
}
Related
I am working on an HTML email signature, which has to be done using rudimentary HTML. I have to use very simple CSS, tables and declare inline CSS for everything. All in all it works fine, but I have an issue with links. I can stripe the link to have no underline or color:
<a style="text-decoration: none; color:inherit!important;" href="https://#">link</a>
But don't know it is possible at all to add :hover entity inline?
a: hover {text-decoration: underline;}
Any ideas are welcome!
There's no equivalent :hover in inline css.
You can give your anchor tag a class or id and change the property you need in there
<a class="anchor"> link </a>
Inside your css stylesheet
.anchor{
text-decoration: none;
}
if you don't want to use external stylesheet you can add a onmouseover attribute to the element like so
Link
The inline style have higher priority.
simply remove the text-decoration: none; from the element.
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<a style="color:inherit!important;" href="https://#">link</a>
another way is to add !important, but it's considered a bad habit:
a:hover{
text-decoration: underline !important;
}
I have an anchor tag styled with
text-decoration: none.
This has removed the underline from my links, which is what I want.
However after the link is clicked, little bits of the link underline appear under the spaces between the icons in the link.
I have something like this
<a ng-click="toggle(this)" style="text-decoration: none">
<i class="fa fa-caret-down" ng-if="!collapsed"></i>
<i class="fa fa-folder-open-o" ng-if="!collapsed"></i>
<i class="fa fa-caret-right" ng-if="collapsed"></i>
<i class="fa fa-folder-o" ng-if="collapsed"></i>
</a>
(Using font awesome icons)
The underline is appearing just under the blank space between the icons.
Is there any way to get rid of that link underline for once and for always?!
That is because the default CSS values for links are declared by different browsers. A link has 4 official states.
Normal
Hover
Active (On mouseclick)
Visited
(Focus)
In CSS you can declare the style for each of these. If you want the link not to display the text-decoration in these states:
a, a:hover, a:active, a:visited, a:focus {
text-decoration:none;
}
Answer to your comment
Yes, you can replace the a with a classname. For instance, you have a link with the class 'myLink'.
You can make the CSS:
.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus {
text-decoration:none;
}
The right way and you should cover this by adding the following css in your style sheet definition:
**Longer CSS Styling definition:**
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
**Shorter CSS definition:**
a, a:visited, a:hover, a:active {
text-decoration:none;
}
this will ensure no underlining in all state of links to be absolutely sure that there will not be underlining in any of the links on the page. You can also condense the styling definition in your css so the code isn't long and it's more efficient to control style for all link behaviours because it applies to all of the links on the page when you're defining a
if you want to style it for specific links you'd do the following:
a.nav:link {text-decoration: none; }
a.nav:visited {text-decoration: none; }
a.nav:hover {text-decoration: none; }
a.nav:active {text-decoration: none; }
styled links.
or something completely different adding in colours, overline, font weight, size which are going to be different in each link state for that specific class.
a.external:link {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.external:visited {color: #894f7b; font-weight: bold; }
a.external:hover {text-decoration: overline; background-color: #003399; }
a.external:active {color: red; }
You're using the wrong property... text-decoration-line is not meant for this.
The text-decoration-line property specifies what type of line, if any, the decoration will have
Use text-decoration: none instead
<style>
a{text-decoration:none}
a:visited{text-decoration:none}
</style>
Add a stylesheet to your project
I have a website with a contacts page.
on this page I have my email address which is linked in a mailto anchor. The email displays in the usual unvisited blue with an underline.
trying to remove this is where the problem starts
My code for this link is:
<li>
<div class="icon email">Email:</div>
<div class="email_info" style="text-decoration:none">kevin#kh.co.uk</div>
</li>
I have tried adding text-decoration:none to the ul and li in my CSS code but none of them seem to work. Where am I going wrong?
Apply text-decoration: none; to the a element not the container div.
Inline styles (defining CSS via the style attribute on individual elements) is also generally bad practice - you should put it in an external stylesheet, or at least in your head like so:
<style>
.email_info a {
text-decoration: none;
}
</style>
You can try following...
ul li a {
text-decoration: none;
}
Add the following CSS
.email_info a {
text-decoration: none;
}
Try:
ul li a {
text-decoration: none;
}
if that doesn't work:
Link
and just put it in the link itself
Does anybody know if it's possible to prevent underlining on the child of an tag, while underlining the rest of the tag's contents?
Here's an example - you can see this working on JSFiddle. I've tried everything I can think of, but the text underlining continues to be applied to all the text inside the link. I'm viewing on Chrome, but I'm sure this applies to all browsers.
a {
font-size: 32px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a div {
color: pink;
}
a:hover div,
a:active div,
a:focus div {
text-decoration: none !important;
}
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.
</a>
Read this similar answer and its links for more information: Remove :hover on :after elemets
http://jsfiddle.net/thirtydot/ygXy6/4/
CSS:
a {
font-size: 32px;
text-decoration: none;
}
a:hover span {
text-decoration: underline;
}
HTML:
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
<span>This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.</span>
</a>
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.