On Chrome and Firefox, if I apply a text-decoration:underline on a tag, by default the underline does not apply to the pseudo element.
But on IE it does, and I can't remove it.
I want the link to be underlined, but not the pseudo element.
It work if I add a span inside and put the underline on it, but I want to know if it can be made without additional markup.
a{
padding-left: 9px;
position:relative;
display:inline-block;
}
a:before{
content:'\203A\00a0';
position:absolute;
top:0;
left:0;
display: inline-block;
}
#underline{
text-decoration: none;
}
#underline:hover{
text-decoration:underline;
}
/* special for IE */
#underline:hover:before
{
text-decoration:none !important; /* does nothing ! */
}
#color{
color:green;
}
#color:hover{
color:red;
}
#color:hover:before{
color:green; /* work ! */
}
#span{
text-decoration: none;
}
#span:hover span{
text-decoration: underline;
}
underline
<br>
color
<br>
<span>with span</span>
It seems that IE don't let you override the text-decoration in the pseudoelement if it isn't set in it.
First let the pseudo-element be underlined - text-decoration: underline - and afterwards override this with textdecoration: none.
#underline:hover:before
{
text-decoration:underline;
}
#underline:hover:before
{
text-decoration:none;
}
As text-decoration: underline; can't be overridden in IE you could use border-bottom: 1px solid green; instead. This can then be overwritten on the :before by setting its border colour to the background colour (in this case white). This will only work on solid colour backgrounds though.
a {
color: green;
display: inline-block;
padding-left: 9px;
position: relative;
text-decoration: none;
}
a:before {
content: '\203A\00a0';
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
a:hover {
border-bottom: 1px solid green;
}
a:hover:before {
border-bottom: 1px solid white;
}
Hover to check underline
you can add this to your css. this helped me in the IE
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before,a:after { text-decoration:underline;}
a:before,a:after,
a:hover:before,a:hover:after {text-decoration:none;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
Related
This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 2 years ago.
I'm trying to use the pseudo class :nth-child() with :hover but it seems to not work for me. I am trying to change the colour of one element to green when hovered over, but it highlights all of them. I also tried without the hover and none of the colours change.
ul {
background-color: white;
text-decoration: none;
padding: 0;
margin: 0 auto;
}
ul li {
margin: 0 2em;
display: inline-block;
padding: 0;
list-style: none;
}
ul li a {
text-decoration: none;
color: black;
}
a:nth-child(2){
color: green;
}
<ul>
<li>Easy</li>
<li>Medium</li>
<li>Hard</li>
<li>Insane</li>
</ul>
That's because the a isn't the 2nd child - it is an only child of it's parent li. What you are looking for is the a child of the 2nd li element. You can get that like this:
li:nth-child(2) a{ color: green; }
Then for the hover, either of these work with the code in your question. It depends on what you want to target with the hover:
// When the <a> in the second li is hovered, change it's colour
li:nth-child(2) a:hover{ color: green; }
/* OR */
/* When the second li is hovered, change the colour of the <a> it contains */
li:nth-child(2):hover a{ color: green; }
Working Example (using different colours to show it working):
ul {
background-color: white;
text-decoration: none;
padding: 0;
margin: 0 auto;
}
ul li {
margin: 0 2em;
display: inline-block;
padding: 0;
list-style: none;
}
ul li a {
text-decoration: none;
color: black;
}
/* change colour of 2nd link */
li:nth-child(2) a{
color: blue;
}
/* change colour of 2nd link on hover */
li:nth-child(2):hover a{
color: green;
}
/* change colour of 3rd link on hover */
li:nth-child(3) a:hover{
color: red;
}
<ul>
<li>Easy</li>
<li>Medium</li>
<li>Hard</li>
<li>Insane</li>
</ul>
Reference: Mozilla MDN Docs for nth-child
I hope this code may help you. And learn more about pseudo-classes and elements using this link.Click here to learn about CSS Pseudo-classes
li:nth-child(2):hover a{
color: red;
}
My CSS code for .header and .mtstyle are now showing in my header when I preview. Nothing I have done has fixed the issue. This just started to happen. Thoughts? Also, is there a way to combine the a:link css into one line? Thanks.
.header {
position: absolute;
height: 45px;
right: 0;
top: 0;
left: 0;
background-color: white;
}
.mtstyle {
text-align: center;
margin-top: 5px;
margin-left:15px;
}
/* unvisited link */
.mtlstyle a:link {
color: #3399CC;
}
/* visited link */
.mtlstyle a:visited {
color: #3399CC;
}
/* mouse over link */
.mtlstyle a:hover {
color: none;
}
/* selected link */
.mtlstyle a:active {
color: #3399CC;
}
.mtlstyle a:link {
text-decoration: none;
}
.mtlstyle a:visited {
text-decoration: none;
}
.mtlstyle a:hover {
text-decoration: none;
}
.mtlstyle a:active {
text-decoration: none;
}
<div class="header">
<div class="mtstyle">
<div class="mtlstyle">
<h1>Title</h1>
</div>
</div>
</div>
When you want to code, always try to close your open tags before put another tag in it!
For starter your HTML is incorrect in this line:
<h1>Title</h1>
It should be:
<h1>Title</h1>
you must enclose a tag first then close the h1.
And you can always create CSS for multiple classes or behaviour with use of ",", like this:
a:hover, a:visited, a:active {
text-decoration: none;
}
Delete this
/* unvisited link */
.mtlstyle a:link {
color: #3399CC;
}
/* visited link */
.mtlstyle a:visited {
color: #3399CC;
}
My problem is that, when I hover over my div, it doesn't change the links color to what I want it to be. It just stays its default black color.
How can I make it so that when I hover over the thumbnail-cointainer div, it changes the color of the link?
<div class="thumbnail-container">
Text Here
</div>
CSS:
a {
color: #000000;
text-decoration: none;
}
a:hover,
a:focus {
color: #005580;
text-decoration: underline;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
float: left;
}
.thumbnail-container:hover {
color: #0088cc;
}
The problem is selector specificity. Select the anchor as well:
.thumbnail-container:hover,
.thumbnail-container:hover a {
color: #0088cc;
}
Or depending on what you want you may use inherit. Just add this:
.thumbnail-container a {
color:inherit;
}
.thumbnail-container:hover a {
color: #0088cc;
}
This is one of the links in my nav:
<li><span id="navLiveNow" class="white innerShadow textShadow">Live Now</span></li>
I also have the following in my css:
a { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
But the links still display in the awful blue/purple visited /hover html default. What am i doing wrong?
You need to override the color:
a { color:red } /* Globally */
/* Each state */
a:visited { text-decoration: none; color:red; }
a:hover { text-decoration: none; color:blue; }
a:focus { text-decoration: none; color:yellow; }
a:hover, a:active { text-decoration: none; color:black }
REMOVE DEFAULT LINK SOLVED
that :visited thing is css.... you just go to your HTML and add a simple
< a href="" style="text-decoration: none" > < /a>
... thats the way html pages used to be
<a href="https://www." style="color: inherit;"target="_blank">
For CSS inline style, this worked best for me.
Hey define color #000 into as like you and modify your css as like this
.navBtn { text-decoration: none; color:#000; }
.navBtn:visited { text-decoration: none; color:#000; }
.navBtn:hover { text-decoration: none; color:#000; }
.navBtn:focus { text-decoration: none; color:#000; }
.navBtn:hover, .navBtn:active { text-decoration: none; color:#000; }
or this
li a { text-decoration: none; color:#000; }
li a:visited { text-decoration: none; color:#000; }
li a:hover { text-decoration: none; color:#000; }
li a:focus { text-decoration: none; color:#000; }
li a:hover, .navBtn:active { text-decoration: none; color:#000; }
If you wants display anchors in your own choice of colors than you should define the color in anchor tag property in CSS like this:-
a { text-decoration: none; color:red; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
see the demo:- http://jsfiddle.net/zSWbD/7/
By default link color is blue and the visited color is purple. Also, the text-decoration is underlined and the color is blue.
If you want to keep the same color for visited, hover and focus then follow below code-
For example color is: #000
a:visited, a:hover, a:focus {
text-decoration: none;
color: #000;
}
If you want to use a different color for hover, visited and focus. For example Hover color: red visited color: green and focus color: yellow then follow below code
a:hover {
color: red;
}
a:visited {
color: green;
}
a:focus {
color: yellow;
}
NB: good practice is to use color code.
When you set the style of a tag in your CSS it goes global (as Andreas Wong mentioned), IE, it is applied in every scenario to that tag (visited, hovered, focus etc...), unless you manually change it
So you can do it like bellow:
a{
color : blue;
}
Now you can specify the color in a certain scenario:
a{
color : blue;
}
a: focus{
color : skyblue;
{
I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?
PS Yeahh guys, I know about div with black backgrond color and 1px * Npx and position: relative, but It's so slowly...
You could wrap the text in a span and give it a border-bottom with padding-bottom:2px;.
Like so
span{
display:inline-block;
border-bottom:1px solid black;
padding-bottom:2px;
}
Example: http://jsfiddle.net/uSMGU/
For cross-browsing it is better to use text-underline-offset over the text-underline-position, because text-underline-position isn't supported by iOS Safari
So use this answer: https://stackoverflow.com/a/63607426/1894907
#line{
text-decoration-line: underline;
text-underline-offset: 2px;
}
A great way to do this without adding and extra spans and having more control is using the :after selector.
Useful especially for navigation menus:
.active a:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want more or less space between the text and the underline, add a margin-top.
If you want a thicker underline, add more height:
.active a:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}
Simply use:
text-decoration: underline;
text-underline-position: under;
#line{
text-decoration-line: underline;
text-underline-offset: 1px;
}
<div id="line">
Text with line
</div>
just use
{
text-decoration-line: underline;
text-underline-offset: 2px;
}
how about using border-bottom:1px; padding:what-you-likepx
.my-underlined-text {
text-decoration: underline;
text-underline-offset: 8px;
}
This is my solution...
HTML
<p>hola dasf hola dasdsaddasds dsadasdd<span></span></p>
CSS
p {
color: red;
text-decoration: none;
position: absolute;
}
a:hover {
color: blue;
}
p span {
display:block;
border-bottom:3px solid black;
width: 50%;
padding-bottom: 4px;
}
I used #jake's solution, but it gave me trouble with the horizontal alignment.
My nav links are flex row, center aligned and his solution caused the element to shift upwards in order to stay horizontally center-aligned.
I fixed it by doing this:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
display: block;
}
This will maintain the horizontal alignment for you.
You can do this with a bit of a hack using ::after elements, and positioning them manually. This does mean that you have to maintain the content attribute of the after element but you could make this easier by using a data attribute in the html tag and referring to it. See the example below -
span:after {
font-size: 1rem;
position: absolute;
content: 'Hello there..';
width: 100%;
height: 100%;
white-space: pre;
text-decoration-skip-ink: none;
text-decoration-line: underline;
left: 0px;
top: 10px;
color: white;
z-index: -1;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: black;
}
span {
position: relative;
}
<span>Hello there</span>
Try this:
.yourElement{
border-bottom: 1px solid #000;
line-height: 2;
}