Basically some things you can only define in style sheets

You can search up and read about psuedo elements and pseudo classes

These simply aren't allowed in inline styles, which is what you are using here. In other words, your code above would translate to this element:

<span style="color:#fff" />

☝️ The style is defined "inline", e.g. inside the tag, vs. say

<span class="external-style" />

where the style info is now detached and associated with that class name and can be defined elsewhere (often a style sheet).

It's weird for us because, in the world of Compose for Web, we're just writing Kotlin, and everything looks like code. But in the world of html / css, stylesheets are encouraged and inline styles are discouraged (because I'd assume separation of concerns / decoupling -- in theory you can swap a new stylesheet in / out and completely change the look and feel of a well written site)

FWIW, I'm working on my own layer on top of Compose for Web which approaches this in a slightly different direction. It's called Kobweb if you wanted to check it out. With Kobweb, you could do something like this for your above example:

val MyHoverableSpanStyle = ComponentStyle("hoverable-span") {
  base { Modifier.color(Colors.White) }
  hover { Modifier.backgroundColor(Colors.Yellow) }
}

Span(MyHoverableSpanStyle.toModifier().asAttributesBuilder()) { ... }

I'll leave things there for now -- let me know if you had any followup questions!