A Wavy Underline in CSS

A wavy underline in CSS

Without background image:

.err {  display: inline-block;  position: relative;}.err:before {  content: "~~~~~~~~~~~~";  font-size: 0.6em;  font-weight: 700;  font-family: Times New Roman, Serif;  color: red;  width: 100%;  position: absolute;  top: 12px;  left: -1px;  overflow: hidden;}

<div>A boy whose name was Peter was  <div class="err">woking</div> down the street</div>

How to create a wavy underline on mutilline text with CSS?

Here's my wavy line solution:
http://dabblet.com/gist/f6cfd244631c8ca898ef60b100b96386

.err {   background-image:    linear-gradient(45deg, transparent 65%, red 80%, transparent 90%),    linear-gradient(135deg, transparent 5%, red 15%, transparent 25%),    linear-gradient(135deg, transparent 45%, red 55%, transparent 65%),    linear-gradient(45deg, transparent 25%, red 35%, transparent 50%);  background-repeat:repeat-x;  background-size: 8px 2px;  background-position:0 95%;}

<p>This text has a <span class='err'>tpyo</span> in it. </p><p>This text has a <span class='err'>logner pyto insid Spicy jalapeno bacon ipsum dolor amet tail tenderloin doner turducken shankle, meatloaf flank spare ribs tri-tip prosciutto kielbasa chicken alcatra landjaeger. Alcatra meatball pork, shank meatloaf porchetta biltong pig</span>.</p>

Wavy underline behaves strangely in chromium

1. Add padding to the div.
2. Use wavy for the hover with outline(kinda cheat code)

My guess is due to the underline on the div is what it is causing the issue.

div {  padding: 5px;  font-size: 30px;  text-decoration: underline;  display: inline-block;}
div:hover {  display: inline-block;  text-decoration-style: wavy;  /* looks like this code is needed */  outline: 1px solid rgba(255, 255, 255, 0.1);}

<div>Hello world</div>

Wavy line in text field with CSS google like

Google uses a repeated base64 encoded image as a span below the input. You can type stuff in your span and it will appear below it.

.error:hover {    background: url(data:image/gif;base64,R0lGODlhCgAEAMIEAP9BGP6pl//Wy/7//P///////////////yH5BAEKAAQALAAAAAAKAAQAAAMROCOhK0oA0MIUMmTAZhsWBCYAOw==) repeat-x scroll 0 100% transparent;    display: inline-block;    padding-bottom: 1px; }

<span class="error">hello</span>

Animated CSS Text Underline

To fix the line issue (without regard to actual browser support), try to use the text-decoration-line: line-through; property and value. I changed the positioning for demonstration purpose.

.divider-body {  display: flex;  justify-content: center;  align-content: center;  margin: 0;  padding: 0;  position: relative;}
.divider-wave {  width: 30%;  height: 10%;  background: white;  overflow: hidden;}
.divider-wave:before {  content: attr(data-text);  position: absolute;  top: 50%;  transform: translateY(-50%);  color: white;  font-size: 4em;  text-decoration-style: wavy;  text-decoration-color: #607d8b;  text-decoration-line: line-through;  animation: animate 0.5s linear infinite;}
@keyframes animate {  0% {    left: 0;  }  100% {    left: -30px;  }}

<div class="divider-body">  <span class="divider-wave" data-text="dividerdivider" /></div>

Wavy text decoration remains when no longer hovering: Chrome

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>

CSS - Underline, strikethrough and overline (with styles and colors) in one element

Use display:inline-block and border-top and border-bottom and text-decoration

span{  display:inline-block;  border-top:dotted 1px #000;  border-bottom:thick double red;  text-decoration: line-through wavy aqua;}

<span>Some Text</span>

---

Related Topics