Simplify hovers

[maddymeows]

Enables hovers to replace the class name with a simple & to better help understand what the selector is doing.

Sometimes it is necessary to write code that gets as complex as [&[aria-selected=true]:has(+_:not([aria-selected=true]))::before]:border-purple-500. I often reach to hover over the class to make sure it is doing what I intended. Unfortunately the current implementation's hover puts out this code:

.\[\&\[aria-selected\=true\]\:has\(\+_\:not\(\[aria-selected\=true\]\)\)\:\:before\]\:border-purple-500[aria-selected=true]:has(+ :not([aria-selected=true]))::before {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
}

I would not blame you if you had no idea what this selector was doing, and the noise gets amplified by the word wrapping that VS code does. It takes quite a lot of time to precisely figure out which part of this selector is relevant. With my changes the hover would instead show the following:

&[aria-selected=true]:has(+ :not([aria-selected=true]))::before {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity));
}

I've opted to make this default behaviour as I believe this is the better experience to provide by default.