css - Can I target a :before or :after pseudo-element with a sibling combinator? -
is there reason why css doesn't work?
a[href^="http"]:after { content:""; width:10px; height:10px; display:inline-block; background-color:red; } a[href^="http"] img ~ :after { display:none; }
.. on html?
<a href="http://google.com">test</a> <a href="http://google.com"> <img src="https://www.google.com/logos/classicplus.png"> </a>
the idea have pseudo-element on matching anchor tags. not want apply anchor tags wrap image. , since can't target anchors using a < img
, figured maybe target :after pseudo-element finding image it's sibling of.
any insight appreciated.
you can't target :after since it's content not rendered in dom , not manipulate - work dom have re-rendered , css can't manipulate this.
check specification detailed understanding: http://www.w3.org/tr/css2/generate.html#propdef-content
generated content not alter document tree. in particular, not fed document language processor (e.g., reparsing).
i suggest use javascript job you.
Comments
Post a Comment