How To Remove The Twenty Nineteen Divider Lines

You Are Here:
/
/
How To Remove The Twenty Nineteen Divider Lines
Real Time Solutions for Wordpress and Web Design in Knoxville Tennessee

How To Remove The Twenty Nineteen Divider Lines

2019-1

Whether you are new to WordPress or an old pro, you are probably trying out the latest theme to WordPress, Twenty Nineteen. While I have plenty of reasons to hate this new theme, we are only going to focus on this issue.

I am a member of several groups on Facebook, and I see the same question getting asked. “Help, how do I get rid of this line that just showed up everywhere.”

Image showing the default. H2 :before line.

As you can see in the editor (classic editor is enabled here, but same applies to the new editor), each time we apply a heading, it automatically inserts this divider line. Most folks, including me hate this. so lets get rid of them.

Image showing the WordPress Classic Editor and H2 tag.

Open the Inspector On Chrome

Image Highlighting The :before Tag.

Highlight over our line and right click to inspect element. You will see if you expand all the little classes on the right panel that a tag called h2::before is causing this.

h1:not(.site-title):before, h2:before {
    background: #767676;
    content: "\020";
    display: block;
    height: 2px;
    margin: 1rem 0;
    width: 1em;
}

We need to change this to:

h1:not(.site-title):before, h2:before {
    background: #767676;
    content: "\020";
    display: none;
    height: 2px;
    margin: 1rem 0;
    width: 1em;
}

You will also notice there is one above the title of our post.

Image Showing The Default Divider Line Above Page/Post Title

This is the culprit this time.

.entry .entry-title:before {
    background: #767676;
    content: "\020";
    display: block;
    height: 2px;
    margin: 1rem 0;
    width: 1em;
}

So we will also change this one as well.

.entry .entry-title:before {
    background: #767676;
    content: "\020";
    display: none;
    height: 2px;
    margin: 1rem 0;
    width: 1em;
}

Now lets shorten all the clutter out of the way and prepare us a fix for our theme.

.entry .entry-title:before {display: none;}
h1:not(.site-title):before, h2:before {display: none;}

Open Customizer

Open your theme customizer and paste this into our additional CSS section.

Image Showing Where To Place Our CSS in the Theme Customizer.

TADA!

We hope this helps. Please smash that like button!

Facebook
Google+
Twitter
LinkedIn
Pinterest