Wavy text decoration remains when no longer hovering: Chrome

text-decoration-line
css underline thickness
text-decoration-skip
text-decoration-style
text-decoration-color
text-decoration: none
text-decoration none not working
text-decoration: line-through

I applied wavy text-decoration to some nav links when hovering. In Chrome, when no longer hovering, half of the wavy decoration remains, usually on the first link I hovered over. It also sometimes occurs when hovering over a different link. It's a really strange effect. This does not happen in Firefox. It also behaves as expected in Chrome if the underline is normal/not wavy. The following codepen shows my issue. The text-decoration rules are at the bottom of the CSS. I'm still new to this, so not entirely sure what is going on.

https://codepen.io/pmc222/pen/mGGaXO

.main-nav {
  margin-right: 10px;
}

/* Removes bullets */
.main-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav__item {
  display: inline-block;
}

.main-nav__item__link {
  text-decoration: none;
  font-weight: bold;
  color: rgb(0, 0, 0);
  letter-spacing: 2px;
  padding: 0 5px 0;
  font-size: 1.1em;
}

.main-nav__item__link-one:hover {
  text-decoration: underline wavy rgb(255, 0, 0);
}

.main-nav__item__link-two:hover {
  text-decoration: underline wavy rgb(0, 255, 0);
}

.main-nav__item__link-three:hover {
  text-decoration: underline wavy rgb(0, 0, 255);
}

For simplicity's sake, I have stripped the classes out with the exception of the <a>. Details are commented in the CSS.

Demo

/* Browser reset */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}


/* End of browser reset */

body {
  background: url("https://www.worshipbackgroundsforfree.com/wp-content/uploads/2012/12/Screen-Shot-2012-12-20-at-11.21.52-AM.png") no-repeat center center fixed;
  background-size: cover;
}


/* Defines header as a flexbox */

header {
  height: 50px;
  width: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


/* This is a flex item */
/* Removed <div> wrapped around <a> */

/* Positions index link on the left side of the flex container */
/* Added display:block to <a> so it doesn't need a <div> wrapped around it */
.title {
  display: block;
  font-size: 2em;
  margin-right: auto;
  margin-left: 10px;
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-family: "Great Vibes", cursive;
}


/* This is a flex item */

nav {
  margin-right: 10px;
}


/* Removes bullets */

nav ul {
  list-style: none;
}

nav li {
  display: inline-block;
}

/* <a> has 4 pseudo-classes that must be in this order:
:link, :visited, :hover, :active
LoVe and HAte
i i      oc
n s      vt
k i      ei
  t      rv
  e       e
  d
*/
nav a:link,
nav a:visited {
  text-decoration: none;
  font-weight: bold;
  color: rgb(0, 0, 0);
  letter-spacing: 2px;
  font-size: 1.1em;
  /* Added so when hovered there's no overlap */
  padding: 5px;
}

nav a:hover,
nav a:active {
  text-decoration-line: underline;
  text-decoration-style: wavy;  
  /* Added because it's buggy without it */
  outline: 1px solid rgba(255, 255, 255, 0.1);
}

nav a.link-1:hover,
nav a.link-1:active {
  text-decoration-color: red;
}

nav a.link-2:hover,
nav a.link-2:active {
  text-decoration-color: green;
}

nav a.link-3:hover,
nav a.link-3:active {
  text-decoration-color: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
  <title>Wedding Draft</title>
</head>

<body>
  <header>
    <a class="title" href="index.html">The Mc-Stamm Wedding</a>


    <nav>
      <ul>
        <li><a href="venue-info.html" class="link-1">Venue Info</a></li>
        <li><a href="accommodations.html" class="link-2">Accommodations</a></li>
        <li><a href="wedding-party.html" class="link-3">Wedding Party</a></li>
      </ul>
    </nav>
  </header>

  <main>

  </main>

  <footer>

  </footer>
</body>

</html>

text-decoration, The text-decoration property adds an underline, overline, line-through, or a none : no line is drawn, and any existing decoration is removed. underline; text​-decoration-style: wavy; text-decoration-color: red; /* can #More Information Chrome will also recognize those values with the -webkit prefix and  Hovering over items in the elements tab of the inspector window no longer highlights those items blue on the page. Clicking to modify an attribute on an element does allow me to edit it, but the typing cursor has disappeared and the ability to select text is gone, so I am typing/editing blind.

I haven't found a bug in your code, but you can overcome it by adding a default style to each class, when not being hovered:

.main-nav__item__link-one{
    text-decoration:none;
}    
.main-nav__item__link-two{
    text-decoration:none;
}
.main-nav__item__link-three{
    text-decoration:none;
}

More Control over Text Decoration, Marie Mosley just finished up a revamping of the text-decoration property (and But you may not be aware that there is more you can do with this property, Left is Chrome, right is Firefox. a { text-decoration-style: wavy; } idea) and then on :hover you see the underline essentially thicken up turning into  However, :hover is set to dark brown. Thus, when I hover over a visited link, the color remains white, it doesn't change back show more For some reason, when I hover over a link that was visited, the color doesn't change as specified. For instance, the normal link color is white and the visited link color is white.

/* Browser reset */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
/* End of browser reset */

body {
  background: url("https://www.worshipbackgroundsforfree.com/wp-content/uploads/2012/12/Screen-Shot-2012-12-20-at-11.21.52-AM.png") no-repeat center center fixed;
  background-size: cover;
}

/* Defines header as a flexbox */
.main-header {
  height: 50px;
  width: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* This is a flex item */
/* Positions index link on the left side of the flex container */
.main-header__index-link-container {
  margin-right: auto;
  margin-left: 10px;
    text-decoration: none;
}

/* styles index link */
.main-header__index-link {
  font-size: 2em;
/*   color: rgb(0, 0, 0); */
  text-decoration: none;
  font-family: "Great Vibes", cursive;
}

/* This is a flex item */
.main-nav {
  margin-right: 10px;
}

/* Removes bullets */
.main-nav__items {
  list-style: none;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  text-decoration: none;
}

.main-nav__item {
  display: inline-block;
}
a { text-decoration: none; }
main-nav:hover { text-decoration: none; }
.main-nav__item__link {
  text-decoration: none;
  font-weight: bold;
  color: rgb(0, 0, 0);
  letter-spacing: 2px;
  padding: 0 5px 0;
  font-size: 1.1em;
    text-decoration: none;
  transition: all 0.3s ease;
}

/* .main-nav__item__link-one:hover {
  text-decoration: underline wavy rgb(255, 0, 0);
}

.main-nav__item__link-two:hover {
  text-decoration: underline wavy rgb(0, 255, 0);
}

.main-nav__item__link-three:hover {
  text-decoration: underline wavy rgb(0, 0, 255);
} */
.main-nav__item a:hover {
    text-decoration: underline wavy rgb(0, 0, 255);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="wedding.css">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
  <title>Wedding Draft</title>
</head>

<body>
  <header class="main-header">
    <div class="main-header__index-link-container">
      <a class="main-header__index-link" href="index.html">The Mc-Stamm Wedding</a>
    </div>

    <nav class="main-nav">
      <ul class="main-nav__items">
        <li class="main-nav__item main-nav__item-one"><a href="venue-info.html" class="main-nav__item__link main-nav__item__link-one">Venue Info</a></li>
        <li class="main-nav__item main-nav__item-two"><a href="accommodations.html" class="main-nav__item__link main-nav__item__link-two">Accommodations</a></li>
        <li class="main-nav__item main-nav__item-three"><a href="wedding-party.html" class="main-nav__item__link main-nav__item__link-three">Wedding Party</a></li>
      </ul>
    </nav>
  </header>
    
  <main>
 
  </main>

  <footer>
  
  </footer>
</body>

</html>

text-decoration, The text-decoration shorthand CSS property sets the appearance of decorative lines on text. none; } would not cause any change; the entire paragraph would still be underlined. The text-decoration property is specified as one or more .​over { text-decoration: wavy overline lime; } .line { text-decoration:  I too am having issues with the insert image in the splash screen widget, I am using Chrome Version 66.0.3359.181 (Official Build) (64-bit) on a Windows 10 OS, it will not work in IE or Firefox either, however, if I test on a machine with a Windows 7 OS it works fine. Any help would be greatly appreciated.

6 Reasons Why The Chrome Link Underline Change is Not So Hot, To be clear, the Chrome link underline style change not a big huge deal. Still: it's a design change, it's new to many, and its benefits are murky. is not as clean non-underlined text, and is somewhat more difficult to read. but there is (as far as I know) no mandate to force users to stop using current versions of IE. Heck, there are still companies using Windows 7. We'll see a small, but very vocal ie user base that refuse to give up this piece of trash for a long time yet.

367091 - text-decoration-style not working - chromium, Solid underline Does it occur on multiple sites: Yes Is it a problem with a That fiddle looks invalid, it uses "wave" instead of "wavy". text-decoration-style does work, but Is CSS3 still considered "experimental" Depends on the module no longer work and do not show any dashed styling of underline? // hover no longer works on element1 document.styleSheets[1].cssRules[2].style.setProperty Thanks bloodeye, I didn't know one could do that, but it's kinda a hassle since I'm overlaying the main window - i would have to find my stylesheet among all the others.

Stunning CSS3: A project-based guide to the latest in CSS, The user has no control over text in an image to make it more readable for You also always need to make sure that the text is still readable if the shadow Making Text Stand Out Using Shadows Let's add a textshadow on hover to In this case, there's no need to add any browserspecific prefixes; Firefox, Safari, Chrome,  The No Link Underline plugin will remove these links, and clean up your pages. Changes: v1.42 Updated to work with new versions of chrome v1.41 Modified extension to use jQuery to surgically remove underlines v1.3 Fixed links that are still underlined in Facebook messages

Comments
  • Thanks. This was very helpful.
  • text-decoration: none is actually applied to all three links in the rule for selector .main-nav__item__link. The only reason I made separate classes for each one is to style the underline color different.
  • main-nav__item__link only applies to your link (<a>) while your hover rules applies to the containing div
  • Your solution doesn't allow for styling each link with a different color underline.