CSS underline h1

Hi there,

this article provides a method for adding hover animations to the menu:

https://docs.generatepress.com/article/adding-menu-hover-animation/

The H1 underline effect requires some custom development - can give this a shot.

1. Create a new Hook Element.
2. Add this code to the hook:

<style>
h1.entry-title {
	position: relative;
}
h1.entry-title:before,
h1.entry-title:after {
    content: " ";
    height: 3px;
    width: 0;
    background-color: #b5267b;
    position: absolute;
    right: 50%;
    bottom: 0;
    transition: all 1.5s ease;
}
h1.entry-title:after {
	right: auto;
	left: 50%;
}

h1.entry-title.loaded::before,
h1.entry-title.loaded::after {
    width: 150px;
}
</style>
<script>
var title = document.querySelector(".entry-title");
document.addEventListener("DOMContentLoaded", function() {
  setTimeout(function(){
    title.classList.add("loaded");
  }, 700); // set delay time before animation
});
</script>

3. Select the wp_footer hook
4. And set the display rules to Entire site or just the single posts for example.

This is very nice, thanks a lot!
i changed

h1.entry-title.loaded::before,
h1.entry-title.loaded::after {
    width: 150px;
}

to width: 35%;

I hope this change is CSS conform?
How i could get a little more distance from h1 to the line?

That change is fine.
To move the line down change:

bottom: 0;

to:

bottom: -10px;

The larger the negative number the further down it will move.

Thank you VERY MUCH!
very nice!

You're welcome

Sorry, David on one project it goes in the Page Hero the H1 Tag,
But then it does not work.
What needs to be changed in the sript?

Regards

In your JS, this line:

var title = document.querySelector(".gb-headline");

Its looking for the gb-headline - which isn't a class on the H1 as you're using a Header Element.

To make it work:

1. Edit the header element and add a class of entry-title to the H1 eg.

<h1 class="entry-title">{{post_title}}</h1>

2. Change the JS line above to:

var title = document.querySelector(".entry-title");

PERFECT!
Thank YOU David.

You're welcome