Add a Full-Width Line Behind the Read More Button

Enhance your archive pages with a sleek, full-width line behind the “Read More” button using this straightforward CSS hack. Simply insert the following CSS snippet into your preferred code snippet manager or the theme’s additional CSS section

*This coding is for Kadence themes only.

CSS:

/* read more */
a.post-more-link .kadence-svg-iconset {
    display: none!important;
}
a.post-more-link {
    position:relative;
    top: -12px;
    z-index:3;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: capitalize;
    text-decoration: none;
    color: #718096!important;
    font-size: 14px!important;
    padding: 5px 15px;
    border: 0px solid #ebebeb;
    background:#fff!important;
}
a.post-more-link:hover{
    border-color: #718096!important;
    color:#333!important;
}
.entry-footer {
    text-align: center;
    margin-bottom:50px;
}
.entry-footer::before {
    display: table;
    content: '';
    position: relative;
    top: 21px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #718096;
    z-index: 2!important;
}

1. I’ve included a border but turned it off from showing on the read more button. in this line: border: 0px solid #ebebeb;

in the 

a.post-more-link

Section.

In this section you will might need to center the line in the center of the read more button.

.entry-footer::before -> top:21pxx
and in the
a.post-more-link ->top: -12px

In the 

a.post-more-link 

You can play with the padding 

also u will need to set a color for the background of the button to fit your theme in the

a.post-more-link

 also you can change the color of the line as well in the 

.entry-footer::before -> background:#333

Enjoy and always AS IS

Author: Webmaster

Hey, I’m Scot, the guy behind WpScriptly. I create simple, no-fluff WordPress plugins and tools to make your site easier to manage and more powerful. Everything I build is tested on my own projects first — if it’s here, it’s because it works. Thanks for checking out the site. Hope you find something useful at Wp Scriptly.

Follow me at:

Recent Articles:

• The Importance of Active Members in Coalition WP Community - Blog
• Simple Raffle Plugin for WordPress – Auto Generate Codes, Export Data, GDPR Compliance - Plugin
• Plugin List Exporter for WordPress - Plugin
• FluentCRM Campaign Dashboard Plugin: Simplify Your Email Campaign Management - Plugin
• Display User or Guest Gravatar and Nickname with a Shortcode in WordPress - Function

*These scripts and plugins are provided as is with no guarantees or warranties. If you need assistance or run into issues, feel free to reach out via the contact page.