Question

The click event is not fired when clicked on the red area.
The span padding changes on a:active state.

How to target that ‘moved area’ without targeting the span itself?

Fiddle: http://jsfiddle.net/KC2ct/

Markup:

<a href="#"> <span>TEXTO</span> </a>
<p>debug</p>

CSS:

a{background-color: red}
span{color: white; background-color: blue}
a{display: block; width: 64px; height: 22px}
span{padding:5px}
a:active span{padding: 6px}
p.click{color: green}

JS:

$('a').click(function(){
    $('p').toggleClass('click');
});

How it looks like normal state (note the red right area):

How it looks like when pressed (:active):

Answer 1

Updated your CSS take a look at your updated fiddle

http://jsfiddle.net/KC2ct/5/