I have content coming from a WYSIWYG editor in use by a technologically uninitiated client, with a pretty challenging request to go with it.
Basically, any time an <a>
is alone inside a <p>
, they want that <a>
to be styled like a button. When I say "alone inside a <p>
", I am also meaning that there is literally no surrounding text.
For example's sake:
<p><a href="/foo">Bar</a></p>
Is styled like a button, whereas
<p>Lorem ipsum dolor sit amet <a href="/foo">Bar</a></p>
Is not.
Unfortunately the :only-child
pseudo class does not suffice here, as it doesn't consider the text node to be an element, and so both examples above would be styled as buttons.
I believe the answer is no, but is there any pure CSS solution to this?