Can you use two different pseudo elements on one element on CSS?

119 views Asked by At

I make userstyles, in other words, third party CSS or custom CSS, and I'm replacing text with content property and the before and after pseudo elements. The problem is, to completely hide the original text, I have to set the original element's font-size to 0. This also hides things set in place with the hover pseudo element. I was going to just apply the hover properties to my before pseudo element, but then I would have to use 2 pseudo elements, which I don't think is possible. But, I'm not sure. Here's a sample similar to my code.

a.class[href="link"] {
 font-size: 0;
 visibility: hidden;
hover: 
}
 a.class[href="link"]:hover {
 background-color: black;
}
a.class[href="link"]:before {
 font-size: 16px;
 visibility: visible!important;
 content: "This text replaced what showed before";
}

a.class[

0

There are 0 answers