css - Can I target a :before or :after pseudo-element with a sibling combinator? -


is there reason why css doesn't work?

http://jsfiddle.net/6v5bz/

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

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -