CSS text-decoration: reverse

Question

I'm surprised that there is no "text-decoration: reverse" in CSS as it seems very awkward to achieve using JavaScript. I.E. set the element's foreground and background color to the background and foreground of the parent respectively.

I noticed JavaScript techniques for that here

Surely it's not that complicated?

Answer 1

What are you calling reverted? Do you mean to set the background as the foreground color and vice versa? (Maybe it's a stupid comment, but if so it is not a decoration is it?)

Anyway you're about to have a fight between DRY and MVC here :

• either you declare a new CSS class each time you want to do that. That's redundant and painful, but you indeed separated the style from the code.

Typically:

.mydiv {
   background-color: blue;
   color: red;
   font-family:...;
   (...)
}


.mydiv:hover {
   color: red;
   background-color: blue;
}

• another option is to do that through javascript. Proxify suggested using jQuery.

  The result would probably look like that... (not tested)

$(".invert").map(function (el) {
       var color = el.css("color");
       var bgcolor = el.css("background-color");
       el.css("color", bgcolor).css("background-color",color);
    })