Hello.
My site is vimag.gr.
Is it possible to underline links in articles with half bold line and when you touch it with mouse to be completely covered with color?
Thank you
Hi,
Yes this can be done using a special css, like this one:
.td-post-content a {
position: relative;
display: inline-block;
text-decoration: none;
color: #000;
}
.td-post-content a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 50%;
height: 2px;
background-color: currentColor;
transition: width 0.3s ease;
}
.td-post-content a:hover::after {
width: 100%;
}
The css can be set global in theme panel > custom code> custom css, or locally in single post template, edit it with tagDiv Composer and drag a raw css element and set the css in it.
It dosent work properly because the underline covers the word. I would like something like the titles in Momentum theme. I want the color to fullfill half of the word and when you touch it to be covered all.
Thank you
Hi,
If I test the code provided by my colleague it works like this.
The code adds an underline below half of the link https://prnt.sc/DK-YQ7TJiugl and when I hover it it extends below the full link https://prnt.sc/XLA0TVbN009X
It doesn’t seem to cover the words in any way. I can modify it if you want, would you like the links to be like this? https://prnt.sc/a7PJqc9og2xM meaning over the words?
Let me know.
Thanks.
Yes, I mean over the word, like it is in the Momentum theme (last picture you sent me). I want the line to appear in half link and when I hover the word to cover all the word.
Thank you
Try something like this https://pastebin.com/7rAPcXJQ Remove existing codes that apply to the links in the post content and add this one.
It should look like you want. I made the line cover the word vertically, but it can be adjusted if you want.
Thanks.
Hello again. Sorry for the late response. Yes, that’s what I mean. It works fine, but there is a small problem. When the link is more than one word and continues on another line, it is not covered by color.
See what I mean in this article: https://vimag.gr/pagosmia-imera-ton-ilikiomenon/
Thank you.
Hi,
Please replace the above css with this one:
.tdb_single_content a {
position: relative;
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--insight-turquoise), var(--insight-turquoise));
background-repeat: no-repeat;
background-size: 100% 6px;
background-position: 0 100%;
transition: background-size 0.25s ease;
}
.tdb_single_content a:hover {
background-size: 100% 100%;
color: white;
transition: background-size 0.25s ease, color 0.25s ease;
}
.tdb_single_content a:active {
background-size: 100% 100%;
color: white;
}
The results should be https://i.imgur.com/Vs4P8sR.png
It works fine. Thank you
