How can I remove the ::after CSS selector which is automaticaly appended to the_content()?

I have a CPT which displays meta values after the_content() in the front end, and this ::after selector is messing with my layout. The selector always appears right after the final element inside the_content().

I have a CPT which displays meta values after the_content() in the front end, and this ::after selector is messing with my layout. The selector always appears right after the final element inside the_content().

• css

Share Improve this question edited Mar 13, 2019 at 12:00 Jacob Peattie 44.3k1010 gold badges5050 silver badges6464 bronze badges asked Mar 13, 2019 at 11:51 bogdanbogdan 10311 gold badge11 silver badge44 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

It has nothing to do with the_content().

::after is a pseudo element that's added with CSS. Note that the ::after element in the dev tools is only there to help development. It does not exist in the HTML source.

So your theme's CSS must be adding it to whatever element is wrapping the_content() in your template. You can remove it by setting content: none; on the selector for it. For example, if the element that's wrapping your content is <div class="entry-content"> then the CSS to remove it could be:

.entry-content::after {
    content: none;
}

The rules of specificity still apply though, so whatever selector you use to remove it needs to be more specific than the one that added it.

Also keep in mind that your theme likely does this for a reason. Most commonly elements like this are used to clear floats and prevent float-aligned content, like images, from breaking outside the parent element.