Adding Link effect to comments and posts

Do you have a link to one of the other pages that you mentioned that shows the link effect?

Sure, this page shows the effect:
https://tobiasahlin.com/blog/css-trick-animating-link-underlines/

It is described, hwo to add it, but when i apply it to my page, also the Top-Menu Links and some other stuff is involved.

You just want it for the post content and comments? I’m not sure what the code you added looks like but you should be able to add #content at the beginning of the CSS to target just the post content/comments and it should work.

So maybe something like

#content a {
   [whatever code here];
}

#content a:after {
	bottom: 0;
	content: "";
	height: 1px;
	left: 0%;
	position: absolute;
	background: #21759b;
	width: 100%;
	transition: 0.3s ease all;
}

#content a:hover:after {
	width: 0%; 
	transition: 0.3s ease all;
}

I added this code, but i have the lines also above some clickable images and in the middle of the screen.

• This reply was modified 4 years, 7 months ago by Anonymous User 17894248.

What if you add :not(img) to it?

#content a:after:not(img){bottom:0;content:"";height:1px;left:0;position:absolute;background:#21759b;width:100%;transition:.3s ease all}#content a:hover:after{width:0;transition:.3s ease all}

When i try this code, its almost working, but with :not(img) the CSS does not work anymore.

#content a {
  position: relative;
  text-decoration: none;
}

#content a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

#content a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

And, the links on the right (posts and comments) are not affected. Which tag shall i use there?

Which links do you want to have that affect? All links except the site title and the links in the main menu?

Yes, i have 3 widgets on the right:
– search
– posts
– and comments

they also should have the layout with hover.

Also it would be nice to know, how to manage, that linked images do not have the effect.

Try changing #content into #main and it should target things below the navigation menu. It looks like you’re modifying the site right now though as things are changing, so I’m not able to debug further.

Thank you very much for your help!
Yes, i was modifying the page ??

Now, it is ok, but still the images are affected and – as you can see on the right, there are some links, which need 2 lines to be displayed. Only in the first line, the affect is applied – how can i “extend” this?

The following should fix the issue with the images in the post content

#main .wp-block-image a:before {
	all: initial;
}

I’m not sure of a fix for links on multiple lines though, with the CSS position being used, it is causing the conflict. You might be able to contact the author of that article though to see if they know of a workaround for links spanning multiple lines.

Thank you very much for your help!
I decided to use

#main .addtoany_share_save_container a:before {
	all: initial;
}

to only exclude the share buttons.

The normal pictures can have the underline as well.