- This topic has 13 replies, 3 voices, and was last updated 3 years ago by Elvin.
-
AuthorPosts
-
March 8, 2021 at 7:11 am #1686812Henk
Hello,
How do I get a horizontal line (width 75px) under my H1 text?
Here is an example of what I want.
I tried the following CSS code:
h1:before { content: ''; width: 75px; height: 3px; background: #006699; position: absolute; left: 0px; bottom: -10px; right:0; margin:0 auto; }
But the horizontal line is not under the
H1
text, but under theP
tag. Also this does not work on mobile view.March 8, 2021 at 7:54 am #1686870DavidStaffCustomer SupportHi there,
try:
h1 { position: relative; display: inline-block; } h1:before { content: ''; width: 75px; height: 3px; background: #006699; position: absolute; left: 0px; bottom: 0; right:0; margin:0 auto; }
You may want to adjust the line-height and bottom margin of the H1 in the Customizer to position closer/further away below the text.
March 9, 2021 at 12:14 am #1687621HenkHi David,
I added the above code, and it works. But now my H1 text moves to the left. I added
text-align:center;
but this does not help.Any suggestions?
Thanks!
March 9, 2021 at 12:27 am #1687630ElvinStaffCustomer SupportHi there,
On this CSs:
h1 { position: relative; display: inline-block; }
Can you try removing
display: inline-block;
?March 9, 2021 at 12:55 am #1687654HenkThanks Alvin!
This works for the home page. But now onn the other pages my line is in the middle, and not to the left. How do I change that?
March 9, 2021 at 1:27 am #1687695ElvinStaffCustomer SupportYou’ll have to add selector to the previous CSS you’ve added so it only applies to the home page.
Example:
body.home h1 { position: relative; display: inline-block; } body.home h1:before { content: ''; width: 75px; height: 3px; background: #006699; position: absolute; left: 0px; bottom: 0; right:0; margin:0 auto; }
March 9, 2021 at 1:31 am #1687700HenkI have added a selector for the other pages. There I want to move the line to the left under the H1. How can I do that?
March 9, 2021 at 1:41 am #1687710ElvinStaffCustomer SupportTry this:
:not(body.home) h1:before { content: ''; width: 75px; height: 3px; background: #006699; position: absolute; left: 0px; bottom: 0; right:0; margin:0; }
Note: This isn’t good practice. If you wish to apply specific stylings to specific headings, you should use GB Headline’s classes to apply proper styling through the class selectors instead of non specific selector styling. (h1 tag)
March 9, 2021 at 1:45 am #1687717HenkHi Alvin,
Are you saying I can create the horizontal line under my H1 text using just GB?
March 9, 2021 at 7:46 am #1688322DavidStaffCustomer SupportWhat Elvin means – in the Block Editor, any block you set in Advanced panel you can set an Additional CSS Class – which you can use to style each heading with CSS.
But lets forget that for now.
Can you confirm there will be:
1. H1 aligned left with underline aligned left – if so – where does that apply?
2. H1 centre aligned with underline centre aligned – is so where does that apply ?March 9, 2021 at 11:49 pm #1689100HenkHi David,
I decided to use the H1 underline only on the homepage. This is what I have now:
body.home h1 { position: relative; } body.home h1:before { content: ''; width: 75px; height: 3px; background: #F0F5F9; position: absolute; left: 0px; bottom: 0; right:0; margin:0 auto; }
Is this the correct way of doing it?
March 9, 2021 at 11:56 pm #1689113ElvinStaffCustomer SupportI decided to use the H1 underline only on the homepage. This is what I have now:
body.home h1 { position: relative; } body.home h1:before { content: ''; width: 75px; height: 3px; background: #F0F5F9; position: absolute; left: 0px; bottom: 0; right:0; margin:0 auto; }
Is this the correct way of doing it?
Yes that’s correct.
March 10, 2021 at 12:19 am #1689133HenkThanks Elvin!
March 10, 2021 at 12:20 am #1689137ElvinStaffCustomer SupportNo problem. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.