Site logo

Archived topic

Text link underline

10 replies · Started by Dev on August 7, 2021

Viewing posts 1–11 of 11

Hello,

In my blog post, I want my hyperlinked text like this - https://prnt.sc/qeg9ok

For that, I use this CSS. But it is not working. Can u please tell me the correct CSS.

body:not(.blog):not(.archive) .inside-article a {
font-weight: bold;
}
body:not(.blog):not(.archive) .inside-article a:hover {
text-decoration: underline;
}

Hi there,

That CSS us working, i can see the link is Bold and the underline appears when the link is hovered.
Have you cleared your browser caches ?

.

Remove your current CSS.
And try this:

.single .inside-article p a {
    font-weight: bold;
    text-decoration: underline;
}

Hello,

I don't want the text to get bold. I only need an underline and I told u that my color settings are getting override. Please see this image. http://prnt.sc/1l541xb

You just need to remove the font-weight: bold; property from the CSS i provided.
And the color is Red when i visit your site. You can change the link color in Customizer > Colors > Content.

Thanks, but I think I'm not making it clear to you.

First, my breadcrumbs text is also getting underline due to the above CSS see this image - http://prnt.sc/1l5kksp

Second, for my blog to readmore text I'm using the below CSS and in that CSS color code (blue) is also there. Now the problem is when I'm making my post or pages link color red, it is overriding the Readmore color. It Means the blog Readmore text color also gets red, which I don't want.

@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;
}
}

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

Try this CSS instead:

.single .inside-article .entry-content p a , .page .inside-article .entry-content p a {
    text-decoration: underline;
    color: #ab262b;
}

For the read more link, it's using the color set in the customizer, I don't see specific CSS added for it.

Hi Dev,

I've checked your site's CSS and you're actually half-way there.

There's a syntax error with this CSS:

.read-more {
    margin: 20px 30px;
    float: right;
    border-bottom: 2px solid color: #1b60a1;
}

Here's a corrected version.

.read-more {
    margin: 20px 30px;
    float: right;
    border-bottom: 2px solid #1b60a1;
    color: #1b60a1;
}

Or remove border-bottom: 2px solid #1b60a1 if you don't want the underline anymore.

This archived topic is closed to new replies.