[Resolved] Add short divider line in Page Header

[Jhorene]

Hi guys,

I’m new to Generate Press and I must say I’m loving working with Generate Press and Elemnentor.

I would like to add a short 10% divider line below my page header title e.g.
CONTACT US
____

I have this in my page header at the moment, <h1>{{post_title}}</h1> – can you pleae help me to add the divider line below the page title?

Thank you in advance.

Regards,
Jhorene

[David]

Hi there, you can try using a pseudo element like so:

.generate-inside-page-header-content h1 {
	position: relative;	
	display: inline;
}
.generate-inside-page-header-content h1:after {
	content: '';
	width: 50%;
	position: absolute;
	left: 0;
	bottom: -10px;
	border-bottom: 3px solid black;
	-webkit-transform: translate3d(50%,0,0);
	transform: translate3d(50%,0,0);    
}

[Jhorene]

Hi David,

Thank you for the quick reply. That is working great!

My only last question is how to center align it? It’s currently showing up left aligned with the text, instead of center aligned.

Regards,
Jhorene

[David]

I have updated the code above for center alignment.

[Jhorene]

Hi David,

That worked a charm!

[David]

Glad to be of help.

[Author]

Posts