Today has been rough, and I'm struggling to find a solution to my problem.
Here's the issue: I have some nice CSS for links, but I only want it to apply to text links, not images or divs. Just plain text.
My current code looks like this:
a {
display: inline-block;
position: relative;
color: #ffffff;
}
a:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #ffffff;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
Currently, every link has this animation effect, but I only want it on text links. Images linked to something also get this underline effect, causing issues. So, my question is:
Is there a way to specify 'only text links, not everything'? I need a global solution without having to create new classes for each specific element like images or divs. Something simple like:
a:text {
color: #ffffff;
}
This is important because many people will be working on content without access to the code. They won't be able to add classes to elements. If they insert an image, they can't specify that it shouldn't have the underline effect as a link. This restriction needs to be set up universally and forgotten by everyone except two individuals who can manage the CSS.
I've come across some inadequate solutions like 'create a class with a custom hover effect that does nothing', but this isn't ideal as it would require creating custom classes for potential links in various elements.
I hope someone can provide a better solution, thank you.