How To Remove The Twenty Nineteen Divider Lines

A World Webscapes Tutorial

Get Started Now

How To Remove The WordPress Twenty Nineteen Theme Divider Lines Using CSS. 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 ( the classic editor is enabled here, but the 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 let’s 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, let’s 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 you to remove the WordPress Twenty Nineteen Theme divider lines using CSS. Please smash that like button!