Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. wavy underline

wavy underline

Scheduled Pinned Locked Moved General Discussion
3 Posts 2 Posters 666 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    ccastells
    wrote on last edited by
    #1

    Hello, I am trying to add this style of underlining into the site but doesn't seem to be working. Could someone help me please? Thanks! :)

    https://codepen.io/daviddarnes/pen/OgaRYw?q=animate underline&order=popularity&depth=everything&show_forks=false

    http://andrei-lascu.com

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Hi @ccastells
      I looked at the code and it seems simple.

      Can you show what you already did?

      Many wishes!!

      Marius

      www.mariusjopen.world

      C 1 Reply Last reply
      0
      • mariusjopenM mariusjopen

        Hi @ccastells
        I looked at the code and it seems simple.

        Can you show what you already did?

        Many wishes!!

        Marius

        C Offline
        C Offline
        ccastells
        wrote on last edited by
        #3

        Hi @mariusjopen ,
        I copied the css into the custom css & html page:

        a {
        text-decoration: none;
        position: relative;
        padding-bottom: 1em;
        overflow: hidden;
        color: white;
        &:after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        white-space: nowrap;
        content: attr(data-text)attr(data-text);
        color: transparent;
        line-height: 1.8;
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: #ffc823;
        }
        &:hover:after {
        animation: wavy-slide 3s linear infinite;
        }
        }

        @keyframes wavy-slide {
        to {
        margin-left: -51%;
        }
        }

        But it doesn't seem to work... :s
        I also tried changing the &:after/&:hover to a:after/a:hover, but again didn't work.

        I've set the underline stroke to 1px in the customise section so you can see where the links are.
        http://andrei-lascu.com/info/

        Any idea of how I can fix it?

        Many thanks!!! :)
        Carlota

        1 Reply Last reply
        0
        Reply
        • Reply as topic
        Log in to reply
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes


        I also code custom websites or custom Lay features.
        šŸ’æ Email me here: šŸ’æ
        info@laytheme.com

        Before you post:
        1. When using a WordPress Cache plugin, disable it or clear your cache.
        2. Update Lay Theme and all Lay Theme Addons
        3. Disable all Plugins
        4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

        This often solves issues you might run into

        When you post:
        1. Post a link to where the problem is
        2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
        3. If the problem is difficult to explain, post screenshots / link to a video to explain it
        Online Users
        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
        laytheme.com
        • Login

        • Don't have an account? Register

        • Login or register to search.
        • First post
          Last post
        0
        • Recent
        • Tags
        • Popular
        • Users
        • Search