Read more text on right-side with hover effect

Hi there,

try adding this CSS:

.read-more {
    margin: 20px 30px;
    float: right;
    border-bottom: 2px solid rgba(35, 117, 214, 0.4);
}

Thanks, but the above CSS is not working. I added that in my child theme, but it is not working.

Try clearing your browser caches as i can see it in my browser

Hello,

The read more text is not in line with the image. Like this site - https://woorkup.com/

Please check this image: https://prnt.sc/1gnj05l

Try this CSS:

@media (min-width: 769px) {
.blog .inside-article, .archive .inside-article{
    display: flex;
    flex-wrap: wrap;
}

.blog .inside-article .post-image, .archive .inside-article .post-image {
    width: 40%;
}

.blog .inside-article .entry-summary, .archive .inside-article .entry-summary{
    width: calc(60% - 42px);
}

.blog .inside-article header.entry-header, .archive .inside-article header.entry-header{
    width: 100%;
}

.blog .inside-article a.read-more, .archive .inside-article a.read-more {
    margin-top: auto;
    margin-bottom: 0;
}

.blog .inside-article .entry-summary p, .archive .inside-article .entry-summary p{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
}

Let me know :)

Hello,

The above CSS is not working. Would you please tell me what I should do?

Hello,

Any update on this issue.

As I can see the read more is inline with the image:
https://www.screencast.com/t/90yM8qKDAO

Can you clear your browser cache?

Hello,

The problem with ying CSS code is that the hover effect and underline are missing. Please once see the below video of the woorkup site for a clear idea.

Video link - https://share.getcloudapp.com/qGuJPJbw?collection_id=3nfnMp

Also, let me know how to add the arrow after Read more, as you see on the woorkup site.

The CSS I provided should not interfere with your hover effect CSS.

Your site or your browser seems to have some cache issue, this is what I see:
https://www.screencast.com/t/DPxJP150MI

to add the arrow, you just need to go to Customizing > Layout > Blog, and change the Read more label to Read more →.