[Support request] Animated underline on H2s

Home Forums Support [Support request] Animated underline on H2s

Home Forums Support Animated underline on H2s

  • This topic has 19 replies, 4 voices, and was last updated 7 months ago by David.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • #2323221

    Hi guys
    This guy, https://www.samunderwood.co.uk/, built some cool underlining on his headers.
    I would like to have this on my landing page on the H2s. How do do I this?


    Customer Support

    Hi Johan,

    You can try adding class add-underline-animation to the class list of the Headline Block, and then add this CSS:

    h2.add-underline-animation:after {
        height: 10px;
        content: "";
        background-color: #dd0f0f;
        position: absolute;
        left: 0;
        top: 60%;
        z-index: -1;
        width: 100%;
        animation: 1s ease-out 0s 1 fillInFromLeft;
    h2.add-underline-animation {
        position: relative;
        z-index: 20;
    @keyframes fillInFromLeft {
      0% {
        width: 0;
      100% {
        width: 100%;

    You can modify the values to your preference.


    That is perfect. But how do I do to start the animation when you scroll to the section?
    And, on mobile it does not fill under all the words, only the last line.

    Customer Support

    Hi there,

    that site uses Javascript for its animated underlines.
    And this is the Script it runs:

    /* JS for header underline */
    // Options docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
    const options = {
        root: null, // use the document's viewport as the container
        rootMargin: '0px', // % or px - offsets added to each side of the intersection
        threshold: 0.5 // percentage of the target element which is visible
    // Callback docs: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Targeting_an_element_to_be_observed
    let callback = (entries) => {
        entries.forEach(entry => {
            // If entry (box) is visible - according with the params set in <code>options</code>
            // then adds <code>isVisible</code> class to box
            // otherwise removes <code>isVisible</code> class
            if(entry.isIntersecting) {
            } else {
    // Create the intersection observer instance by calling its constructor and passing it a
    // callback function to be run whenever a threshold is crossed in one direction or the other:
    let observer = new IntersectionObserver(callback, options);
    // Get all the <code>.box</code> from DOM and attach the observer to these
        .forEach(animateUnderline => { observer.observe(animateUnderline) });

    Add that to your site inside some <script></script> tags using a wp_footer hook in a GP Hook Element.
    And then add the underline CSS class to any Block you want to observe.
    When a block is in viewport the script will add the animate-underline class to the block, which can then be used for your animation CSS.


    Thanks David!
    So, I removed the CSS given from Fernando.
    I added the script to a hook and the display rule to “Front Page”.
    Then I added “underline” to the CSS in the editor to the headline block. Nothing happens..
    I guess I am missing something here.

    Customer Support

    You still need the CSS from Fernando, but replace the class add-underline-animation with animate-underline.


    Thanks Ying. I tried that, but it still doesn’t work.
    What have I missed?

    Thanks for all the help. You guys are super!

    Customer Support

    Remover Fernandos CSS and add this:

    .underline {
        display: inline-block;
        background-repeat: no-repeat;
        background-image: linear-gradient(180deg,#ff0000 0%,#ff0000 100%);
        background-size: 0% 18%;
        background-position: 0 89%;
        transition: background-size .8s ease-in-out;
        margin: 0 -3px;
        padding: 0 3px;
        font-style: normal;
        will-change: background-size;
    .underline:is(.animate-underline) {
        background-size: 100% 18%!important;
        transition-delay: .4s!important;


    This line:
    display: inline-block;
    This makes it so the underline spans only the text.
    It however means you can’t center the headline, you would need to text align center the container it is in.

    This line:
    background-image: linear-gradient(180deg,#ff0000 0%,#ff0000 100%);
    Change the 2 instances of #ff0000 to your brand color.


    Thanks David. Removed Fernandos CSS and added yours. Added “underline” as a Additional CSS Class on the headline block. Nothing still happens. Sorry, I thought this was going to be an easy one!

    Customer Support

    How did you add the CSS?


    Apperance – Customize – Additional CSS

    Customer Support

    It seems you’ve added a piece of PHP code into the additional CSS field, can you remove that PHP code?

    For how to add PHP code:https://docs.generatepress.com/article/adding-php/


    Wehey! That was it. Thanks!
    But, when I look at the animation on my mobile it is just one large underline below the heading. It doesnt underlines under the different heading words. Any way to fix that?

    Customer Support

    Because the class is added to the entire H2 as per your request in your original topic.

    If you only want the underline add to certain words, select the word and set it to highlight:

    Then change the CSS selector .underline to:.underline mark, .underline:is(.animate-underline) to .underline:is(.animate-underline) mark.


    Hi! Thanks. We are getting there. If I highlight all the words, I still only get the underline below on mobile.
    Works on desktop!

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.