How do I remove this stray underline that only appears in Edge?
2
I'm implementing this design element on my website, which uses the Foundation framework. Everything works great, except in Microsoft Edge and IE, there's a stray mark from the underline visible when there isn't supposed to be (i.e. when not interacting with the link).
Here's the code re-created in Codepen:
https://codepen.io/andk/pen/JwrVMg
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>Notice the dot below the word "One." How can I fix this for Edge/IE? Also, any idea why it only appears on "One" instead of the other nav links?
Thank you!
html css microsoft-edge
asked Dec 29 '18 at 20:58
AndrewAndrew
133
|
show 1 more comment
2
I'm implementing this design element on my website, which uses the Foundation framework. Everything works great, except in Microsoft Edge and IE, there's a stray mark from the underline visible when there isn't supposed to be (i.e. when not interacting with the link).
Here's the code re-created in Codepen:
https://codepen.io/andk/pen/JwrVMg
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>Notice the dot below the word "One." How can I fix this for Edge/IE? Also, any idea why it only appears on "One" instead of the other nav links?
Thank you!
html css microsoft-edge
asked Dec 29 '18 at 20:58
AndrewAndrew
133
1
increase slightly the percentage by using 51% for example
– Temani Afif
Dec 29 '18 at 21:00
@TemaniAfif Good idea! That seemed to work.
– Andrew
Dec 30 '18 at 1:36
If possible, I would still like to understand why this is happening.
– Andrew
Dec 30 '18 at 2:08
as you can see, it only happen on IE/Edge so there is nothing to understand, it's a glitch/bug ... using more than 51% will remove the bug
– Temani Afif
Dec 30 '18 at 7:46
@TemaniAfif Fair enough! Would you like to submit that as an answer and I'll mark it as solved?
– Andrew
Dec 30 '18 at 15:40
|
show 1 more comment
2
2
2
I'm implementing this design element on my website, which uses the Foundation framework. Everything works great, except in Microsoft Edge and IE, there's a stray mark from the underline visible when there isn't supposed to be (i.e. when not interacting with the link).
Here's the code re-created in Codepen:
https://codepen.io/andk/pen/JwrVMg
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>Notice the dot below the word "One." How can I fix this for Edge/IE? Also, any idea why it only appears on "One" instead of the other nav links?
Thank you!
html css microsoft-edge
asked Dec 29 '18 at 20:58
AndrewAndrew
133
I'm implementing this design element on my website, which uses the Foundation framework. Everything works great, except in Microsoft Edge and IE, there's a stray mark from the underline visible when there isn't supposed to be (i.e. when not interacting with the link).
Here's the code re-created in Codepen:
https://codepen.io/andk/pen/JwrVMg
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>Notice the dot below the word "One." How can I fix this for Edge/IE? Also, any idea why it only appears on "One" instead of the other nav links?
Thank you!
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>html css microsoft-edge
html css microsoft-edge
asked Dec 29 '18 at 20:58
AndrewAndrew
133
asked Dec 29 '18 at 20:58
AndrewAndrew
133
edited Dec 30 '18 at 1:39
Andrew
asked Dec 29 '18 at 20:58
AndrewAndrew
133
asked Dec 29 '18 at 20:58
AndrewAndrew
133
asked Dec 29 '18 at 20:58
AndrewAndrew
133
133
1
increase slightly the percentage by using 51% for example
– Temani Afif
Dec 29 '18 at 21:00
@TemaniAfif Good idea! That seemed to work.
– Andrew
Dec 30 '18 at 1:36
If possible, I would still like to understand why this is happening.
– Andrew
Dec 30 '18 at 2:08
as you can see, it only happen on IE/Edge so there is nothing to understand, it's a glitch/bug ... using more than 51% will remove the bug
– Temani Afif
Dec 30 '18 at 7:46
@TemaniAfif Fair enough! Would you like to submit that as an answer and I'll mark it as solved?
– Andrew
Dec 30 '18 at 15:40
|
show 1 more comment
1
increase slightly the percentage by using 51% for example
– Temani Afif
Dec 29 '18 at 21:00
@TemaniAfif Good idea! That seemed to work.
– Andrew
Dec 30 '18 at 1:36
If possible, I would still like to understand why this is happening.
– Andrew
Dec 30 '18 at 2:08
as you can see, it only happen on IE/Edge so there is nothing to understand, it's a glitch/bug ... using more than 51% will remove the bug
– Temani Afif
Dec 30 '18 at 7:46
@TemaniAfif Fair enough! Would you like to submit that as an answer and I'll mark it as solved?
– Andrew
Dec 30 '18 at 15:40
1
1
increase slightly the percentage by using 51% for example
– Temani Afif
Dec 29 '18 at 21:00
increase slightly the percentage by using 51% for example
– Temani Afif
Dec 29 '18 at 21:00
@TemaniAfif Good idea! That seemed to work.
– Andrew
Dec 30 '18 at 1:36
@TemaniAfif Good idea! That seemed to work.
– Andrew
Dec 30 '18 at 1:36
If possible, I would still like to understand why this is happening.
– Andrew
Dec 30 '18 at 2:08
If possible, I would still like to understand why this is happening.
– Andrew
Dec 30 '18 at 2:08
as you can see, it only happen on IE/Edge so there is nothing to understand, it's a glitch/bug ... using more than 51% will remove the bug
– Temani Afif
Dec 30 '18 at 7:46
as you can see, it only happen on IE/Edge so there is nothing to understand, it's a glitch/bug ... using more than 51% will remove the bug
– Temani Afif
Dec 30 '18 at 7:46
@TemaniAfif Fair enough! Would you like to submit that as an answer and I'll mark it as solved?
– Andrew
Dec 30 '18 at 15:40
@TemaniAfif Fair enough! Would you like to submit that as an answer and I'll mark it as solved?
– Andrew
Dec 30 '18 at 15:40
|
show 1 more comment
2 Answers
2
active
oldest
votes
0
Increase the percentage more than 50% to be sure the width will be 0 and you will avoid this bug
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>You can also simplify your code like below without the need of a pseudo element:
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
Thanks, I especially like the second solution that doesn't involve a pseudo element.
– Andrew
Jan 1 at 17:09
add a comment |
-1
In the code below I have added the width properties to the normal state and after states i.e 'width: 0;' and 'width:100%'. I have also used 'ease-in-out' instead of 'ease' and used display properties 'block' and 'inline-block'.
I have also tested in EDGE and it works
It is the width settings in '::after' and ':hover::after', which make the desired alteration with the former set to zero and later 100%.
See my annotations below for amenments
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
In the above I have simply moved the css line that says: border-bottom: 0.125rem solid white;
– Colin Gell
Dec 29 '18 at 22:25
If you have additions, corrections etc, then it is best to edit the answer instead of adding a comment.
– Peter B
Dec 29 '18 at 22:46
Moving border-bottom causes the line to abruptly disappear when you move the cursor instead of shrinking back down and disappearing gradually, which is not ideal.
– Andrew
Dec 30 '18 at 1:29
I see @Andrew , I have amended my code so that it now works for EDGE and has the transition in and out - I have also moved the border bottom back and added width properties instead and display inline-block to the none to the normal state and display block to the after state. I will ammend my answer as per Peter B –
– Colin Gell
Dec 30 '18 at 21:45
1
Thanks @ColinGell this answer is also correct and helpful. Adding a width value seems like a great way to solve it.
– Andrew
Jan 1 at 17:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53973285%2fhow-do-i-remove-this-stray-underline-that-only-appears-in-edge%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Increase the percentage more than 50% to be sure the width will be 0 and you will avoid this bug
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>You can also simplify your code like below without the need of a pseudo element:
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
Thanks, I especially like the second solution that doesn't involve a pseudo element.
– Andrew
Jan 1 at 17:09
add a comment |
0
Increase the percentage more than 50% to be sure the width will be 0 and you will avoid this bug
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>You can also simplify your code like below without the need of a pseudo element:
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
Thanks, I especially like the second solution that doesn't involve a pseudo element.
– Andrew
Jan 1 at 17:09
add a comment |
0
0
0
Increase the percentage more than 50% to be sure the width will be 0 and you will avoid this bug
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>You can also simplify your code like below without the need of a pseudo element:
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
Increase the percentage more than 50% to be sure the width will be 0 and you will avoid this bug
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>You can also simplify your code like below without the need of a pseudo element:
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid white;
left: 51%;
right: 51%;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
background:
linear-gradient(white,white) bottom no-repeat;
background-size:0% 0.125rem;
transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
background-size:100% 0.125rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
answered Dec 31 '18 at 11:13
Temani AfifTemani Afif
71.6k93979
71.6k93979
Thanks, I especially like the second solution that doesn't involve a pseudo element.
– Andrew
Jan 1 at 17:09
add a comment |
Thanks, I especially like the second solution that doesn't involve a pseudo element.
– Andrew
Jan 1 at 17:09
Thanks, I especially like the second solution that doesn't involve a pseudo element.
– Andrew
Jan 1 at 17:09
Thanks, I especially like the second solution that doesn't involve a pseudo element.
– Andrew
Jan 1 at 17:09
add a comment |
-1
In the code below I have added the width properties to the normal state and after states i.e 'width: 0;' and 'width:100%'. I have also used 'ease-in-out' instead of 'ease' and used display properties 'block' and 'inline-block'.
I have also tested in EDGE and it works
It is the width settings in '::after' and ':hover::after', which make the desired alteration with the former set to zero and later 100%.
See my annotations below for amenments
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
In the above I have simply moved the css line that says: border-bottom: 0.125rem solid white;
– Colin Gell
Dec 29 '18 at 22:25
If you have additions, corrections etc, then it is best to edit the answer instead of adding a comment.
– Peter B
Dec 29 '18 at 22:46
Moving border-bottom causes the line to abruptly disappear when you move the cursor instead of shrinking back down and disappearing gradually, which is not ideal.
– Andrew
Dec 30 '18 at 1:29
I see @Andrew , I have amended my code so that it now works for EDGE and has the transition in and out - I have also moved the border bottom back and added width properties instead and display inline-block to the none to the normal state and display block to the after state. I will ammend my answer as per Peter B –
– Colin Gell
Dec 30 '18 at 21:45
1
Thanks @ColinGell this answer is also correct and helpful. Adding a width value seems like a great way to solve it.
– Andrew
Jan 1 at 17:09
add a comment |
-1
In the code below I have added the width properties to the normal state and after states i.e 'width: 0;' and 'width:100%'. I have also used 'ease-in-out' instead of 'ease' and used display properties 'block' and 'inline-block'.
I have also tested in EDGE and it works
It is the width settings in '::after' and ':hover::after', which make the desired alteration with the former set to zero and later 100%.
See my annotations below for amenments
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
In the above I have simply moved the css line that says: border-bottom: 0.125rem solid white;
– Colin Gell
Dec 29 '18 at 22:25
If you have additions, corrections etc, then it is best to edit the answer instead of adding a comment.
– Peter B
Dec 29 '18 at 22:46
Moving border-bottom causes the line to abruptly disappear when you move the cursor instead of shrinking back down and disappearing gradually, which is not ideal.
– Andrew
Dec 30 '18 at 1:29
I see @Andrew , I have amended my code so that it now works for EDGE and has the transition in and out - I have also moved the border bottom back and added width properties instead and display inline-block to the none to the normal state and display block to the after state. I will ammend my answer as per Peter B –
– Colin Gell
Dec 30 '18 at 21:45
1
Thanks @ColinGell this answer is also correct and helpful. Adding a width value seems like a great way to solve it.
– Andrew
Jan 1 at 17:09
add a comment |
-1
-1
-1
In the code below I have added the width properties to the normal state and after states i.e 'width: 0;' and 'width:100%'. I have also used 'ease-in-out' instead of 'ease' and used display properties 'block' and 'inline-block'.
I have also tested in EDGE and it works
It is the width settings in '::after' and ':hover::after', which make the desired alteration with the former set to zero and later 100%.
See my annotations below for amenments
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
In the code below I have added the width properties to the normal state and after states i.e 'width: 0;' and 'width:100%'. I have also used 'ease-in-out' instead of 'ease' and used display properties 'block' and 'inline-block'.
I have also tested in EDGE and it works
It is the width settings in '::after' and ':hover::after', which make the desired alteration with the former set to zero and later 100%.
See my annotations below for amenments
.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>.hover-underline-menu {
width: 100%;
}
.hover-underline-menu ul {
padding: 1rem 0;
}
.hover-underline-menu .menu {
background-color: #2C3840;
}
.hover-underline-menu .menu a {
color: #fff;
padding: 1rem 2rem;
}
.hover-underline-menu .menu a {
position: relative;
display: inline-block; /*added inline-block here */
}
.hover-underline-menu .menu a::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
display: block; /* Added display block */
left: 50%;
right: 50%;
width: 0; /* added width property so no dot in EDGE */
transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
border-bottom: 0.125rem solid white;
}
.hover-underline-menu .menu a:hover::after {
width: 100%; /* Added width 100% */
left: 0;
right: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</nav>answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
edited Dec 30 '18 at 21:58
answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
answered Dec 29 '18 at 22:23
Colin GellColin Gell
11911
11911
In the above I have simply moved the css line that says: border-bottom: 0.125rem solid white;
– Colin Gell
Dec 29 '18 at 22:25
If you have additions, corrections etc, then it is best to edit the answer instead of adding a comment.
– Peter B
Dec 29 '18 at 22:46
Moving border-bottom causes the line to abruptly disappear when you move the cursor instead of shrinking back down and disappearing gradually, which is not ideal.
– Andrew
Dec 30 '18 at 1:29
I see @Andrew , I have amended my code so that it now works for EDGE and has the transition in and out - I have also moved the border bottom back and added width properties instead and display inline-block to the none to the normal state and display block to the after state. I will ammend my answer as per Peter B –
– Colin Gell
Dec 30 '18 at 21:45
1
Thanks @ColinGell this answer is also correct and helpful. Adding a width value seems like a great way to solve it.
– Andrew
Jan 1 at 17:09
add a comment |
In the above I have simply moved the css line that says: border-bottom: 0.125rem solid white;
– Colin Gell
Dec 29 '18 at 22:25
If you have additions, corrections etc, then it is best to edit the answer instead of adding a comment.
– Peter B
Dec 29 '18 at 22:46
Moving border-bottom causes the line to abruptly disappear when you move the cursor instead of shrinking back down and disappearing gradually, which is not ideal.
– Andrew
Dec 30 '18 at 1:29
I see @Andrew , I have amended my code so that it now works for EDGE and has the transition in and out - I have also moved the border bottom back and added width properties instead and display inline-block to the none to the normal state and display block to the after state. I will ammend my answer as per Peter B –
– Colin Gell
Dec 30 '18 at 21:45
1
Thanks @ColinGell this answer is also correct and helpful. Adding a width value seems like a great way to solve it.
– Andrew
Jan 1 at 17:09
In the above I have simply moved the css line that says: border-bottom: 0.125rem solid white;
– Colin Gell
Dec 29 '18 at 22:25
In the above I have simply moved the css line that says: border-bottom: 0.125rem solid white;
– Colin Gell
Dec 29 '18 at 22:25
If you have additions, corrections etc, then it is best to edit the answer instead of adding a comment.
– Peter B
Dec 29 '18 at 22:46
If you have additions, corrections etc, then it is best to edit the answer instead of adding a comment.
– Peter B
Dec 29 '18 at 22:46
Moving border-bottom causes the line to abruptly disappear when you move the cursor instead of shrinking back down and disappearing gradually, which is not ideal.
– Andrew
Dec 30 '18 at 1:29
Moving border-bottom causes the line to abruptly disappear when you move the cursor instead of shrinking back down and disappearing gradually, which is not ideal.
– Andrew
Dec 30 '18 at 1:29
I see @Andrew , I have amended my code so that it now works for EDGE and has the transition in and out - I have also moved the border bottom back and added width properties instead and display inline-block to the none to the normal state and display block to the after state. I will ammend my answer as per Peter B –
– Colin Gell
Dec 30 '18 at 21:45
I see @Andrew , I have amended my code so that it now works for EDGE and has the transition in and out - I have also moved the border bottom back and added width properties instead and display inline-block to the none to the normal state and display block to the after state. I will ammend my answer as per Peter B –
– Colin Gell
Dec 30 '18 at 21:45
1
1
Thanks @ColinGell this answer is also correct and helpful. Adding a width value seems like a great way to solve it.
– Andrew
Jan 1 at 17:09
Thanks @ColinGell this answer is also correct and helpful. Adding a width value seems like a great way to solve it.
– Andrew
Jan 1 at 17:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53973285%2fhow-do-i-remove-this-stray-underline-that-only-appears-in-edge%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
increase slightly the percentage by using 51% for example
– Temani Afif
Dec 29 '18 at 21:00
@TemaniAfif Good idea! That seemed to work.
– Andrew
Dec 30 '18 at 1:36
If possible, I would still like to understand why this is happening.
– Andrew
Dec 30 '18 at 2:08
as you can see, it only happen on IE/Edge so there is nothing to understand, it's a glitch/bug ... using more than 51% will remove the bug
– Temani Afif
Dec 30 '18 at 7:46
@TemaniAfif Fair enough! Would you like to submit that as an answer and I'll mark it as solved?
– Andrew
Dec 30 '18 at 15:40