Margin Issue with hover underline

custom underline css
text-decoration: underline padding
text-underline-offset
css underline thickness
remove underline from link css
css underline spacing
text-decoration none not working
hover underline css

Recently I have been trying to make an underline hover effect. I have used some previous JavaScript, but the issue seems to be that when I hover over a link, it stops prematurely. I believe that there must be an issue with the margin-left, I set in the JS, but I'm not sure where to next

$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
var unav = $(".underline-nav");
$('nav a').mouseover(function() {
  $(".underline-nav").css("transition", "all ease 0.43s");
  var position = $(this).position();
  unav.css({
    "width": $(this).width(),
    "margin-left": $(this).css("margin-left"),
    "left": position.left
  });
})
$('nav').mouseleave(function() {
  $(".underline-nav").css("transition", "all ease 0.7s");
  var firstChild = $(this).find('a:first-child');
  var position = firstChild.position();
  unav.css({

    "width": firstChild.width(),
    "margin-left": firstChild.css("margin-left"),
    "left": position.left
  });
})
html {
  background-color: blue;
}

.underline-nav {
  background: tomato;
  height: .25rem;
  position: absolute;
  top: 6vh;
  transition: all ease 0.37s;
  z-index: 0;
}

.mainnav {
  padding-top: 1vh;
  width: 100%;
  position: absolute;
  z-index: 4;
  font-size: 0.8vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav img {
  padding-left: 4vw;
  height: 3.5vw;
}

a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding-left: 4vw;
  letter-spacing: 0.4em;
}

.sectionone {
  height: 100vh;
  background: url('media/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  font-family: 'Raleway';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="mainnav">
    <a id="one" href="#">HOME</a>
    <a href="#">LINK 1</a>
    <a href="#">LINK 2</a>
    <img src="/media/Asset 1.png" alt="logo">
    <a href="#">LINK 3</a>
    <a href="#">LINK 4</a>
    <a href="#">LINK 5</a>
    <div class="underline-nav">
    </div>
  </div>
</nav>

You have to also mind the padding in your links and the eventually line-height. A css update can be :

.underline-nav {
  margin-top:1.2vw;/* set underline under the link */
  transform : translatex(4vw);/* padding value */
}

demo https://codepen.io/anon/pen/ZZrGvd

$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
var unav = $(".underline-nav");
$('nav a').mouseover(function() {
  $(".underline-nav").css("transition", "all ease 0.43s");
  var position = $(this).position();
  unav.css({
    "width": $(this).width(),
    "margin-left": $(this).css("margin-left"),
    "left": position.left
  });
})
$('nav').mouseleave(function() {
  $(".underline-nav").css("transition", "all ease 0.7s");
  var firstChild = $(this).find('a:first-child');
  var position = firstChild.position();
  unav.css({

    "width": firstChild.width(),
    "margin-left": firstChild.css("margin-left"),
    "left": position.left
  });
})
html {
  background-color: blue;
}

body {
  margin: 0;
}

.underline-nav {
  background: tomato;
  height: .25rem;
  position: absolute;
  top: 6vh;
  margin-top: 1.2vw;
  transform: translatex(4vw);
  transition: all ease 0.37s;
  z-index: 0;
}

.mainnav {
  padding-top: 1vh;
  width: 100%;
  position: absolute;
  z-index: 4;
  font-size: 0.8vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav img {
  padding-left: 4vw;
  height: 3.5vw;
}

a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding-left: 4vw;
  letter-spacing: 0.4em;
}

.sectionone {
  height: 100vh;
  background: url('media/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  font-family: 'Raleway';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="mainnav">
    <a id="one" href="#">HOME</a>
    <a href="#">LINK 1</a>
    <a href="#">LINK 2</a>
    <img src="/media/Asset 1.png" alt="logo">
    <a href="#">LINK 3</a>
    <a href="#">LINK 4</a>
    <a href="#">LINK 5</a>
    <div class="underline-nav">
    </div>
  </div>
</nav>

Styling Underlines on the Web, Styling the underlines that sit beneath links can be a tricky business, and I constantly forget 48px; font-weight: 400; line-height: 1.2; margin-bottom: 10px; margin-top: 0; } The biggest problem with text-decoration is its lack of customizability. How to Create Animated CSS Link Hover Effects Underline. To create the underline effects for the link, Let’s start with the markup. I’ll simply use the standard HTML format to make ready the list of items. We have a container then unorder list of elements and each li element hold the link.

I have changed padding-left of a to margin-left and it seem to work perfectly. I hope this is what you want

$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
var unav = $(".underline-nav");
$('nav a').mouseover(function() {
  $(".underline-nav").css("transition", "all ease 0.43s");
  var position = $(this).position();
  unav.css({
    "width": $(this).width(),
    "margin-left": $(this).css("margin-left"),
    "left": position.left
  });
})
$('nav').mouseleave(function() {
  $(".underline-nav").css("transition", "all ease 0.7s");
  var firstChild = $(this).find('a:first-child');
  var position = firstChild.position();
  unav.css({

    "width": firstChild.width(),
    "margin-left": firstChild.css("margin-left"),
    "left": position.left
  });
})
html {
  background-color: blue;
}

.underline-nav {
  background: tomato;
  height: .25rem;
  position: absolute;
  top: 6vh;
  transition: all ease 0.37s;
  z-index: 0;
}

.mainnav {
  padding-top: 1vh;
  width: 100%;
  position: absolute;
  z-index: 4;
  font-size: 0.8vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav img {
  padding-left: 4vw;
  height: 3.5vw;
}

a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  margin-left: 4vw;
  letter-spacing: 0.4em;
}

.sectionone {
  height: 100vh;
  background: url('media/bg.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  font-family: 'Raleway';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="mainnav">
    <a id="one" href="#">HOME</a>
    <a href="#">LINK 1</a>
    <a href="#">LINK 2</a>
    <img src="/media/Asset 1.png" alt="logo">
    <a href="#">LINK 3</a>
    <a href="#">LINK 4</a>
    <a href="#">LINK 5</a>
    <div class="underline-nav">
    </div>
  </div>
</nav>

[Solved] Text-decoration underline not removing, This topic is empty. margin: 25px auto; On my end word two has an underline under it when I hover over it (in WordPress) and without� Previously I have shared a link hover effect, it also like that but it is a little different and the effect on menu items. Basically, these types of text underline effects are used by many websites. When a user hovers on any link then the underline appears with an animation effect, that attracts users.

In the CSS for the a element, change the padding to a margin (so that you're keeping the spacing without affecting the size of the element), and center-align the text:

a {
    color:#fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.4em;
    margin-left: 4vw;
    text-align:center;
}

Demo: https://codepen.io/glhr/pen/JVpdMX

CSS Document */ @charset "utf-8"; /* CSS Document */ body , ArrowLink a:hover{ text-decoration:underline !important; } /* Un-ordered list right -293px; padding-left: 5px; padding-right: 32px; } /*-----Fix for USA country� Can you underline a text on hover using css? (Like the behavior of a link but not an actual link.) you have the following text Hello work; when you hover your mouse over the text it underlines it using css (the text is not a link)

Styling links, Hover: A link when it is being hovered over by a user's mouse pointer, styled If you don't want to underline links, at least highlight them in some other way. none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265301; } You can find more information about this problem (and solutions) at� I tried using the ‘underline’ effect. However, I was struggling to get this to work on a one page website. You would understand that a one page website will have links to same page sections. For some reason, the underline is there on all the menu links by default and fails to work on the hover since the underline is already present.

Override margin-top and margin-buttom, margin: 0px 0px 20px 0 !important; }. Also, can I change style of tab headers to the same style of my top menu, underline rose on hover? Thank you. The page I� Text underline hover effects. GitHub Gist: instantly share code, notes, and snippets.

Change border-bottom links to underline on hover � Issue #62 � rails , -17,7 +17,8 @@ small { font-size: 1rem; }. img { border: 0; }. a { color: #cc0000; text-decoration: none; }. a:hover { padding-bottom: 2px; border-bottom: 2px solid � Underline – Top to Bottom. Hover over the h3 above. The underline will start with a thickness of 0, and grow to 3px (in this case). You’ll notice that it also manipulates the DOM and moves everything else on the page down 3px.