Bold underline strikethrough

Hello Marc,
1. Do you have the link to the site where such example is live?

1. Do you want this effect on all your links or specific ones?

Gina
Themler Support

Hi Gina,

Yes, i saw it on this site:
https://www.learnreligions.com/what-is-the-meaning-of-faith-700722

Best regards, Marc.

Marc,

I apologize for the delay.

This effect is achieved using background image property. Themler doesn't have it for links.

We can though help you to implement it with custom code. Could you please provide the link to your site? Would you like to have it for breadcrumbs as well?

Pasting example code below for future reference:

a:hover {
background-image: linear-gradient(to right,#F5B88F 100%,#fff 0);}

Gina
Themler Support

Dear Gina, Thank you for your help. With this code i get a filled background but what i want is the Bold underline strikethrough line that goes through the bottom of the text. Is that also possible?

Sorry, more code is required:

a:hover {
    background-position: 0 12px;
    background-repeat: repeat-x;
    background-size: 100% 5px;
    margin-left: -1px;
    margin-right: -1px;
    }

Gina
Themler Support

Hi Gina,

Thank you, this is great!

Last question: where can i find a list of the names of every specific type of link. I want to have different code for the regular links in the text and for the links in the sidewidgets of panels.
Is there something like that?

Best regards, Marc.

Themler is using Bootstrap classes, you would need to study entire Bootstrap structure for CSS to get the answer for this. Can you provide the link to your site and specify links in different parts of the site so we could help and get those classes for you?
I will show on the screenshots how I do it.

Gina
Themler Support

Oke :P

Here is a link
https://www.gemeentedevesting.nl/informatie/anbi/

I want to use the code that you have sent me for all the text links, bullets, etc. (thats working already)

I want to use a little different code for all the other links on the left side of the website

Isn't there a way to find it out myself with inspecting elements?

Best regards, Marc.

Steps to get CSS class:

1. Right-click on the page where your link is and select Inspect:
   

   

2. Use the arrow option to select the element on the page, this would show you the code in the developing console:
   

   

3. When you click on that line of code responsible for that link, on the right you should see CSS code.
   The fist block of CSS usually shows closest CSS class:
   

   

You can copy this class and then add the code to it, for example:

.bd-block-3 .bd-blockcontent:not(.shape-only) a:hover {
background-image: linear-gradient(to right,#F5B88F 100%,#fff 0);}
    background-position: 0 12px;
    background-repeat: repeat-x;
    background-size: 100% 5px;
    margin-left: -1px;
    margin-right: -1px;
    }

Note that I am adding :hover in the end of the CSS class for the code to work on hover only.

Gina
Themler Support

I understand how to do it now!
Thank you, very happy...

Marc.

Dear Gina, is it possible to apply it only on the normal links in the text? (and not on other links like in a widget)
When i use the a:link en a:hover it applies the effect on all the links in my website.
Its a lot of work to exclude all the other links if i use the this methode.

Is that possible?

Best regards, Marc.

Hello Marc,

Try adding article to the code, like this:

article a:hover {}

Gina
Themler Support

jeej :)