javascript - How do I horizontally extend the clickable area of an inline span? -

i have 2 spans, both of trigger action when clicked:

<div>     <span>this multiline<br/>     chunk of text.</span>  <span>and <br/>     second one.</span> </div> 

i user able click anywhere in containing div (which styled box), , have click associated 1 or other span. right now, user has click on actual text click event fired.

here's looks like: http://jsfiddle.net/bjjlf/1/.

i want spans appear single paragraph (ie, need keep them styled display: inline). there going line breaks, i'm flexible re: how created (so can kill </br>s if necessary).

is there easy css solution i'm missing, or have put click handler on surrounding box , coordinate math figure out span click belongs to?

okay, found pure-css solution seems pretty far. suggestions on improving helpful. main constraint right need know width of containing box, constraint can work with.

the idea create absolute-positioned psuedo-before element on spans. give lower z-index span, set height 100% of span's height, set left 0, , width equal width of container:

span:before {   content: '';   display: inline-block;   z-index: 1;   width: 400px;   height: 100%;   position: absolute;   left: 0px; } 

the span has positioned relatively:

span {   z-index: 2;   position: relative; } 

here's updated example (now hover effects!): http://jsfiddle.net/bjjlf/7/