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
Related
In Bootstrap 4 i understand it set the default text-decoration to be none.
But using Bootstrap 5 if i just add a raw anchor tag it is now showing both the blue writing and underline.
I was looking to only show the undelrine upon hovering. Is this something bootstrap 5 changed in the release? I cannot find any documentation stating it.
Currently i use:
a {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
color: inherit
}
but this is also affecting any buttons as links e.g.
Answer
Yes, As of Bootstrap 5 alpha1 the migration docs state:
"Links are underlined by default (not just on hover), unless they’re part of specific components"
You could create a special class like this:
.text-underline-hover {
text-decoration: none;
}
.text-underline-hover:hover {
text-decoration: underline;
}
Link
Demo
Or, if you want it to apply to all anchors except for those that contain a class= attribute use:
a:not([class]) {
text-decoration: none;
}
a:not([class]):hover {
text-decoration: underline;
}
This will not effect btn, only links without class will underline on hover.
All-in-one solution
This CSS code for Bootstrap 5 won't underline your <a ...> links (unless hovered over):
even if they have another class like mb-4 etc
unless they have the btn class, in which case they stay untouched.
Code to copy paste into your CSS file:
/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
text-decoration: none;
}
a:not([class*="btn"]):hover {
text-decoration: underline;
}
Proof:
/* Simulate Bootstrap 5 CSS */
a {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.btn {
text-decoration: none;
border: 1px solid #ccc;
}
a.btn:hover {
text-decoration: none;
border: 1px solid #ccc;
background-color: #ccc;
}
/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not([class*="btn"]) {
text-decoration: none;
}
a:not([class*="btn"]):hover {
text-decoration: underline;
}
An a link without class<br/>
<br/>
An a link with class cool<br/>
<br/>
An a link with class btn
As the default anchor is now underlined, defining custom CSS rules is tricky as these rules will interfere with components (for example navbars, dropdowns, ...).
The official solution i think will be using .text-decoration-none on all the anchors. It's a bit annoying but it's explicit and, we all hope, future-proof. :)
Your <a> tag also has the btn class that's why you get this behaviour.
class="btn btn-outline-dark mr-2 py-0"
Because buttons in bootstrap also has btn class. That's why with your CSS.
a:hover {
text-decoration: underline;
color: inherit
}
All the buttons with class btn also becomes underlined.
Solution:
Just remove btn btn-outline-dark from <a> and use custom class to style it.
Answer
I am new to html and css. I have 2 links one after the other. I have set the a:link and a:hover classes in css. The second link has a purple link color, where it should be silver. They both have a gold hover color which is as it should be. The second link color is correct if I change the link from href="http://*******.blogspot.co.uk/search/label/Past%20Performances" to href="http://*******.co.uk/search/label/Past%20Performances". So by removing .blogspot. from the url. I tried it in Chrome and it doesn't seem to have that problem.
CSS:
a:link {
color: var(--silver-color);
text-decoration: underline;
}
a:hover {
color: var(--gold-color);
text-decoration: underline;
}
HTML
<a title="Send email to Erica" href="mailto:********#hotmail.co.uk" target="_blank">emailing us</a>.
<a title="Erica's blog page" href="http://********.blogspot.co.uk/search/label/Past%20Performances" target="_blank">Erica's blog</a>
You just have to specify :visited selector
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.
So I'm just trying to create a small website. (Don't worry that's not going
to be the title)
Right now the "Home" "News" "Gallery" and "About us" are not actual buttons that direct to another page. When I do
Home
The button turns into color purple and it is underlined. (I know this is how links are shown) But is there a way that I can make these buttons stay color orange like in the picture without them turning blue and underlined. Thanks
http://imgur.com/Czsk4
You can set the styles inline, but the best way to do it is through a css class.
To do it inline:
Home
To do it through a class:
Home
a.nav-link:link
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:visited
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:hover
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:active
{
color: #fb3f00;
text-decoration: none;
}
To do it through a class, you need to put the css code in a separate css file and link it in or you can put it in the head of the document. The best practice is to put it in an external css file so it can be used throughout.
If you want the orange to be on every link throughout, just remove the ".nav-link" part of the classes and remove the class="nav-link" from the link tag. This will make all links orange unless you have defined a another class and explicitly applied it to a link tag.
Good Luck!
Using CSS instead of inline styles will work much better:
a {
color:orange;
text-decoration:none;
}
You can also get fancier and have the underline appear when you hover:
a:hover, a:focus {
text-decoration:underline;
}
This can help improve user experience (UX), though if the links are in the header it may be naturally apparent that they are links. (UX design is more complex than this of course, because you have to consider things like touchscreen users that have no "hover". :) )
All links come with different states so if you want them to stay with just one color you can modify all the states together like so:
a:link, a:visited, a:hover, a:active { color: orange }
You can do that by using CSS.
to set this in your code right at the end of the head-section
<style TYPE="text/css">
a:link, a:visited, a:hover, a:active { color: #ff8080;
text-decoration: none;
}
</style>
and change the #ff8080 in your color
I have the perfect solution for you!
I'm copying and pasting straight from my code. make it relevant to you. This definitely works for what you are trying to achieve.
<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> Order Now