title: How can I get this animation to trigger when anyplace on the link in front of it is hovered/tapped?
body: <p>I have an animation that should run behind a link. Here's the example: <a href="https://codepen.io/ehbehr/pen/KKNbOvN" rel="nofollow noreferrer">https://codepen.io/ehbehr/pen/KKNbOvN</a> and here's my html and css:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, *:before, *:after {
    margin: 0;
    padding: 0;
  }
  
  .container {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  
  .container &gt; div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    }
  
  
  .linky-thing {
    width: auto;
   display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }
  
  .thankyou {
    color: magenta;
    text-decoration: none;
    white-space: nowrap;
    font-size: 2em;
    font-family: arial;
  }
  
  .pulser {
    position: absolute;
    display: block;
    width: inherit;
    padding-top: 20px;
    height: 2em;
    z-index: -1;
  }
  .pulser p {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    z-index: -1;
  }
  
  .pulser p:before {
   content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    border-radius: 50%;
    border: 2px solid #2cfa1f;
      background-size: 100%;
    border-radius: 50%;
    opacity: 0;
  /*}
  
  
  .pulser p:hover:before {*/
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-delay: calc(var(--animation-order)/.33 * 100ms);
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  
  @keyframes pulse {
    0% {
          transform: scale(0);
      }
    
    33% {
      opacity: 1;
      }
  
      100% {
          transform: scale(2.7);
      opacity: 0;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="wrap"&gt;
    &lt;div class="linky-thing"&gt;&lt;a class="thankyou" href="https://wikipedia.org"&gt;lorum ipsum dolor sit amet colotum ecvo&lt;/a&gt;
     &lt;div class="pulser"&gt;
      &lt;p style="--animation-order: 3;" /&gt;
      &lt;p style="--animation-order: 2;" /&gt;
      &lt;p style="--animation-order: 1;" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;      
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It consists of a CSS declaration which iterates 3 times, scaling up and fading out to look somewhat like the old RKO Radio Pictures tower cartoon. I want it to be triggered by hovering anywhere on the text link &quot;over&quot; it. These are the problems I've run into:</p>
  <ol>
  <li><p>Using the :before pseudo-element, I can get it to animate but only when I place it in front of the text and then only when I hover directly over it, not anywhere on the link behind it, and since I've set the animation to opacity: 0; in the before state, nothing will clue someone to trigger the animation, hence wanting it to trigger no matter where on the text someone lands. Moreover, I want it to animate behind the text link. Currently, stacking it under the link eliminates the possibility of even triggering it by hovering.</p>
  </li>
  <li><p>The animation, re-jiggered from here <a href="https://codepen.io/dbenmore/pen/zVxrpB" rel="nofollow noreferrer">https://codepen.io/dbenmore/pen/zVxrpB</a>, works perfectly in that it runs 3 staggered instances of the declaration, but not in the :hover:before state, just in the :before state (notice the commented out markup in the pen). In the :hover:before state it runs only one instance. How do I get it to iterate all three times, instead of just once? (I considered &quot;faking&quot; the look with a png, but at that small size it would be too blurry).</p>
  </li>
  <li><p>For some extra fun, it would be great if instead of displaying in the middle of the text link as I have it now, it could originate from wherever on the text a visitor lands a cursor/taps the text. We're probably getting into some javascript here, (which is above my hobby grade, currently). If so, it will need to be called(?) by a class name rather than an ID as there are literally hundreds of links on the page to which it will apply. (It is a &quot;thank you&quot; page listing all of the sites I've used to help me build my site and to which the solution to this problem will be added.)</p>
  </li>
  </ol>
  <p>My (preliminary) thanks.</p>