Pseudo-classes CSS com estilos embutidos

É possível ter pseudo-classes usando estilos embutidos?

Exemplo:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Eu sei que o HTML acima não funcionará, mas há algo semelhante que funcionará?

PS: Eu sei que devo usar uma folha de estilos externa, e uso. Eu estava curioso para saber se isso poderia ser feito usando estilos embutidos.

Não, isso não é possível. Nos documentos que usam CSS, um styleatributo embutido pode conter apenas declarações de propriedade; o mesmo conjunto de instruções que aparece em cada conjunto de regras em uma folha de estilo. Na especificação Atributos de estilo :

O valor do atributo style deve corresponder à sintaxe do conteúdo de um bloco de declaração CSS (excluindo as chaves delimitadoras), cuja gramática formal é fornecida abaixo nos termos e convenções da gramática central do CSS :

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Não são permitidos seletores (incluindo pseudo-elementos), regras ou qualquer outra construção CSS.

Pense nos estilos embutidos como os aplicados a algum seletor de ID superespecífico anônimo: esses estilos se aplicam apenas àquele elemento com o styleatributo (Eles também têm precedência sobre um seletor de ID em uma folha de estilo, se esse elemento tiver esse ID.) Tecnicamente, ele não funciona assim; isso é apenas para ajudá-lo a entender por que o atributo não suporta estilos de pseudo-classe ou pseudo-elemento (ele tem mais a ver com como pseudo-classes e pseudo-elementos fornecem abstrações da árvore de documentos que não podem ser expressas em o idioma do documento).

Observe que os estilos embutidos participam da mesma cascata que os seletores nos conjuntos de regras e têm maior precedência na cascata (!important não obstante). Portanto, eles têm precedência mesmo sobre os estados da pseudo-classe. Permitir pseudo-classes ou quaisquer outros seletores em estilos embutidos possivelmente introduziria um novo nível em cascata e, com ele, um novo conjunto de complicações.

Observe também que revisões muito antigas das especificações de Atributos de estilo propuseram originalmente permitir isso , no entanto, elas foram descartadas, provavelmente pelo motivo acima, ou porque a implementação não era uma opção viável.

Não CSS, mas inline:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

Veja exemplo →

Em vez de precisar de inline, você poderia usar CSS interno

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Você pode ter:

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

Você pode tentar https://hacss.io :

<a href="http://www.google.com" class=":hover{text-decoration:none;}">Google</a>

Demo