html5 - CSS before and float on different elements work together -

i want :hover picture , showing :before on other element (h2) how can this?

if have both elements laid out siblings, can show them using sibling selector +:

img:hover + h2:before {display: block; width: 100%; height: 2px; background: #f00; content: ' ';}

<img src="http://lorempixel.com/400/200/" />  <h2>image</h2>

---

the above solution works if elements adjacent or somehow related, css cannot use parent selector (which possible in css 4 specification). can achieved using jquery:

$("img").mouseover(function () {   $("h2:before").css("display", "block"); });