I know that embedding CSS styles directly into the HTML tags they affect defeats much of the purpose of CSS, but sometimes it's useful for debugging purposes, as in:
<p style="font-size: 24px">asdf</p>
What's the syntax for embedding a rule like:
a:hover {text-decoration: underline;}
into the style attribute of an A tag? It's obviously not this...
<a href="foo" style="text-decoration: underline">bar</a>
...since that would apply all the time, as opposed to just during hover.
I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.
I should mention that technically you should be able to do it according to the CSS spec, but most browsers don't support it
Edit: I just did a quick test with this:
<a href="test.html" style="{color: blue; background: white}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}">Test</a>
And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?
If you are only debugging, you might use javascript to modify the css:
<a onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">bar</a>
If it's for debugging, just add a css class for hovering (since elements can have more than one class):
a.hovertest:hover
{
text-decoration:underline;
}
<a href="http://example.com" class="foo bar hovertest">blah</a>
If that <p> tag is created from JavaScript, then you do have another option: use JSS to programmatically insert stylesheets into the document head. It does support '&:hover'. https://cssinjs.org/