Image after link?

[Anton Largiader]

POTN used a neat after-link image (with the arrows) whch clarified that the preceding text was a link. Some people like to style their text a lot and maybe the existence of the link can be less obvious.

Can we add that? Looks like it's pretty straightforward using the ::after CSS property. Can be the same link image that XenForo uses in the editor.

Many examples on the web of using the ::after property, but here's one: https://stackoverflow.com/questions/946403/insert-image-after-each-list-item

EDIT: Crudely:

.fop::after {
display: inline-block;
content: "";
width: 10px;
height: 10px;
background: url('ext_link.png') no-repeat;
}

...and this is our <a class="fop" href="https://bhphotovide.com"> link </a> to B&H...

But maybe there's an option or add-on for doing this without coding it youself.

 

[Levina de Ruijter]

There you are, Anton! Nice avatar.

Good suggestion, thanks. I will test the code.

 

[Anton Largiader]

One issue that was mentioned in most of the threads was that the after-image needed to scale well with the text. So the fixed element size probably isn't the best way, unless it's always going to be smaller than the text (so it appears sort of like an asterisk).

I've been messing around with some studio lights and did a selfie! At this point I expect the avatar to change pretty often. I already want to get rid of that bright collar stripe. But the blue isn't terrible against skin tones, color wise. Color theory might suggest it should be a bit more purple, but convention makes blue clothing seem a lot more normal.

 

[Levina de Ruijter]

Yes, I read the comments and it probably won’t be that simple. We’ll see how testing goes, which I will do later today when I’m back at my desktop again.

If the bright collar stripe bothers you, clone it out. It’s a thumbnail, nobody will notice. And it’s a nice pic.