0

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[

John R.
  • 36
  • 4
  • `:before:hover`, is fine as long as you have that other `:before`. – StackSlave Dec 03 '20 at 00:51
  • 1
    You may find it helpful to distinguish between _pseudo-elements_ which are preceded by a double-colon, like `::before` and `::after` and _pseudo-classes_ which are preceded by a single-colon like `:hover`, `:focus` and `:target`. – Rounin Dec 03 '20 at 01:02

0 Answers0