How to make wave-style underline in navigation (CSS)?

Question

So most of the time the underline (as highlight) of a current navigation item is just a line. Is there a way to make it wavy (like waves under the menu text)? And is it possible to make multiple layers of waves (so it looks like a tide)?

Answer 1

Wavy underline is defined in the CSS specs, but at the moment (October, 2015) Firefox is the only browser that supports it :

.error {
    color: inherit;
    text-decoration: underline;  /* All browsers */
    text-decoration-color: red;  /* Firefox only */
    text-decoration-style: wavy; /* Firefox only */
}

Have you seen the <a href="#" class="error">laetst</a> Star Wars movie yet?

For a solution that works in all browsers, you could use a background image :

.error {
    color: inherit;
    text-decoration: none;
    background: url(http://www.phpied.com/images/underline.gif) bottom repeat-x;
}

Have you seen the <a href="#" class="error">laetst</a> Star Wars movie yet?

Answer 2

Just using data:image/png;base64 shaping a single wave on a (for instance) 10x10 pixels grid. Adjusting the background-size propriety for the desiderated wave effect.

Working Fiddle here working on it for a while should reach the desiderated effect.

a {
  line-height: 15px;
  font-size: 15px;
  text-decoration: none;
  position: relative;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAH0lEQVQYlWNgGObgPxQTVISNjVMRTjF8Vv0nRhFcDQDv1Qn3IBa3OQAAAABJRU5ErkJggg==) repeat-x;
  background-position: bottom;
  background-size: 10% 30%;
}

<a href="#null">text of the anchor</a>

Answer 3

What you are trying do do could be achieved with the use of SVG graphics. My recommendation would be:

• Create a curve in the shape you require. Include the SVG element directly after the menu link in your mark-up.
• Position it absolutely underneath the link.
• Hide the SVG element from the user, you may use visibility:hidden or display:none for this depending on your layout and what will work in your situation.
• Use CSS to create a rule so that on hovering over the link, the SVG element is set to display:block or display:inline-block (depending on your layout).

This has some advantages over using a graphic in that it's easy to change color or apply a nice gradient to the colour, or resize it.

For info on creating SVG curves check out this link (see PATHS section): https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

You may find it easier to use an SBG graphics tool rather than trying to write your own mark-up though! One such tool can be found online here: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

Answer 4

One more way to do the same. You can use text-decoration for the purpose.

The text-decoration-skip-ink: none; can be drawn across the full length of the text content.

.highlight-1 {
  text-decoration: red wavy underline;
  text-decoration-skip-ink: none;
}

.highlight-2 {
  text-decoration: blue wavy underline overline;
  text-decoration-skip-ink: none;
}

<p>
  The <span class='highlight-1'>Pixel 4</span> is right around the corner.
</p>

<p>
  The <span class='highlight-2'>Qualcomm Snapdragon 855</span> is expected to be the chipset of choice for the Pixel 4 devices, with reports of 6GB of RAM support.
</p>