I wonder if there is any trick to solve this problem.
I have my link as below text and want to change the underline color.
This link contains in many lines which needs to change the underline color to be lighter than the existing one
Using border bottom is not the way to solve this because multiple lines.
are there any trick to solve this?
EDIT
#Paolo Bergantino: It works with IE8 , is it possible to hack with IE6,7?
If what you mean is a different underline color than what the text is, the only thing I can think of is to add a span around the link:
<span class='underline'>
this just<br>a test<br>of underline color
</span>
And then the CSS:
span.underline {
color: red;
text-decoration: underline;
}
span.underline a {
color: blue;
text-decoration: none;
}
And you get what you want.
EDIT:
Testing this a little further, it is not working for me on IE. If you add border-bottom, however, it surprisingly does work in all browsers, except that IE does not put a border under the last one. I will try to dig a little deeper to see if there's a cross-browser way to do this...
In case anyone is interested - this worked for me - text-decoration-color CSS property:
.example {
text-decoration: underline;
text-decoration-color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
2121 update: this works great! Other useful CSS is https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset for controlling the distance between the underline and the text.
Paolo Bergantino's answer didn't seem to work for me in Chrome on OSX (v19.0.1084.56). However moving the span inside of the a tag seemed to do the trick.
The HTML
<a class="underline" href="#">
<span>Hello world<br>this is a test<br>of changing the underline colour</span>
</a>
And the CSS
.underline {
color: red;
}
.underline span {
color: gray;
}
You can view it here: http://jsfiddle.net/itsmappleby/f4mak/
Or you can use border. This method work at ie6.
HTML
<a href="#" class='underline'>
<span>this just</span><br/>
<span>a test</span><br/>
<span>of underline color</span>
</a>
CSS
a.underline {
text-decoration: none;
}
a.underline span {
display: inline-block;
border-bottom: 1px solid red;
font-size: 15px;
line-height: 12px;
}
and example: http://jsfiddle.net/skanY/1/embedded/result/
Underlined, being a text attribute, inherits the text's color. So I doubt there is a way to explicitly change the underline color without also changing the text color.
The Underlining of links will always be the same color as the text.
sorry for ressing an old question, but i was having the same issue, and didn't find a satisfying answer, so i came up with a different solution and thought i'd share it with you.
it does include a 1x1 background image (or whatever size you prefer), but it's clean and simple - and 100% browser compatible (tested from IE6 and up).
this example has text that changes color, and the underline stays the same. you can just as easily do it other way around.
a, a:link, a:active, a:visited{
text-decoration:none;
color:#888;
background:transparent url('underline.png');
background-position:0 10px;
background-repeat:repeat-x;
}
a:hover{
color:#009ee0;
}
I know this is an old question, but I thought I'd add this...
a:active, a:link, a:visited{
background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
text-decoration: none;
background-size: 2px 2px;
background-position: 0 1.2em;
background-repeat: repeat-x;
}
Note: Older browser support is not completely supported
USE:
<a href="your-link/" style="text-decoration-color: COLOROFUNDERLINE;">
the underline on links is done using the text-decoration css style, i think it's the same color as the text.
if you set the text-decoration to none then add a border-bottom you can change the color with the border-color style.
Also you can use this code to make underlines with different color. Use the Borders
h1{
border-bottom: 1px solid #AAAAAA
}
edit:
you can use java script to draw a line under the text
Related
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
I often use a-tags for buttons, so they have a padding that makes them button like.
How do I change the thickness of the text-decoration underline? People often recommend to use a border-bottom for this, but
A bottom border is something else than underlining, some letters even extend below an underline. Underlining is far more sophisticated than a line below something.
I already use the padding of the elements in question as explained.
I have tried to use a a:hover:after selector to actually have a border-bottom anyway. It seems like css is not giving me a lot of alternatives like text-decoration-underline-height or something similar.
I will then in some way alter the height of that pseudo element to emulate underlining without having a one centimeter distance from the text to the "underline".
It doesn´t seem like the :after pseudo-tag is created using this css-selector. Some have managed to do this, but I do not. So there is nothing to create the hateful border-bottom in.
How do I proceed? Will a proper way of styling text-decoration: underline style underlining be added to css?
Until then, how to underline text using a line of desired thickness?
You could do this using the :after pseudo selector. One of the reasons you cited for not wanting to fake the underline was that you wanted descenders to extend below the underline. Well, you could just use a negative margin on the faked underline to accomplish that(notice how the descender of the p is overlapping the underline):
a {
display:inline-block;
text-decoration:none;
color:red;
}
a:hover {
color:blue;
}
a:hover:after {
background:red;
}
a:after {
display:block;
content:'';
width:100%;
height:4px;
background:blue;
margin-top:-2px;
}
Sample link with descender
I tried using APAD1's method to create an underline and I spent at least 20 minutes thinking there was something wrong with how I was doing it. I couldn't get it to work at all on FireFox, so I came up with this method which worked like a charm for those who might be having trouble.
a{
display:inline-block;
color:red;
text-decoration:none;
border-bottom:4px solid blue;
}
a:hover{
color:blue;
text-decoration:none;
border-bottom:4px solid red;
}
Sample underline
You can also use the padding-bottom property to distance the border from the text. You can't pull it closer though, which I assume shouldn't be a problem since you aren't wanting it too close to begin with.
You could consider using a box-shadow, like this:
a
{
box-shadow: 0 5px 0 rgba(0,0,100, 0.5);
text-decoration: none;
padding-bottom: 5px;
}
My super link
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
see definition: https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
The downside of this solution is, that the outline is not clickable.
To overcome this, you can do something like this:
a
{
box-shadow: 0 -5px rgba(0,0,100, 0.5) inset;
text-decoration: none;
padding-bottom: 10px;
}
Totally clickable
I have a background color on my links (on hover, rails-style). And I have an img inside an a-tag that I don't want to have a background on hover.
I tried
a:hover img{ background-color: #fff; }
but that's not doing anything. How do I exclude img-tags inside a-tags from the hover?
Thx,
MrB
edit: jsFiddle
http://jsfiddle.net/rasvf/1/
In the example: "google" has a red background on hover, as intended. But when you hover over the image, it also does. It's supposed not to have a hover background.
if i understand you correctly, i think you are trying to do something like this:
a:hover img{ visibility: hidden; }
or
a:hover img{ display: none; }
EDIT
In that case you want:
a:hover img {background-color: transparent;}
Example posted on: http://jsfiddle.net/6qwJy/
It's hard to understand your example. Say I have this piece of HTML:
<a class="foo" href="#"><img src="bar.gif"/> Click me</a>
then with these style rules
a#foo:hover { background-color: blue; }
a#foo img { background-color: white; }
the image background color will always be white, also on hover.
If however you have background images on the element that contains your link and you want that to show behind the foreground image, then you can't do this. In that case you'll have to wrap the "Click me" text of the link in a span and write in your stylesheet:
a#foo:hover span { background-color: blue; }
Is this what you intended?
Ah! I did it. Easy. I just put the not-to-have-a-background-image in a different div and then did:
.otherdiv a:hover{ background-color: transparent; }
a img {
vertical-align: bottom;
}
Ok, you won't believe me, but I had the same problem above and I resolved as follows:
I had something like this:
<img src"path/to/image.gif">
And in my CSS I had:
a:hover { text-decoration: underline; }
And, believe me, I just had to put the 'img' tag in the same line as the 'a' tag, like this:
<img src="path/to/img.gif">
And that was all!!!
Example page,
Accompanying CSS
Should be a fairly basic issue but for some reason I can't figure it out.
Basically I want the links in my navbar to have no underline or colour change and remain white.
Any idea where I'm going wrong?
It's because you're selecting the main .links element, but not the actual a elements inside. This should do the trick:
.links a {
text-decoration: none;
color: white;
}
this is really confusing, i don't want the browser to change the color of links, so the links color will stay same as specified in <font> . i know that i can specify a color with the property A:link , but that's not what i want.
Thanks
If you don't want any coloration just do something like this:
a, a:hover, a:visited, a:active {
color: inherit;
text-decoration: none;
}
If anyone cares this is what I did with buttons that I made from the links. Probably have to watch out for the inheritance but it worked perfect in my case. Good luck!
HTML:
<a class="button blue" href="/">Place Your Order Today</a>
CSS:
a.button:visited
{
color:inherit;
}
.button
{
padding: 6px 8px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin-right: 10px;
border-radius: 6px;
}
.blue
{
border: 1px solid #2d748c;
background-color: #40b5dc;
}
Specify the same color for a:visited and maybe also a:hover and a:active or simply put the color inline like this:
link text
<font> is deprecated anyway.
I'm pretty sure there's no way to do what you're describing. But if you want the link color to match the body text color, I'd recommend this...
The body text color came from somewhere. Probably a CSS definition. Inspect some text in Firebug to see exactly where the applied color was defined. For example, maybe it points you to a rule like this:
body { color:#666; }
Just add in your A tag right there, so it would be like this. I know it's redundant but I really don't think CSS has a way to say "inherit from one level higher in the cascade than you usually would."
body, a { color:#666; }