keep link from expanding across entire page - html

Question

I'd like a generalized solution that will always limit the clickable link area to the text of my h2 text. Note that the issue is that when you hover over or click on the space to the right of the text you are still on a clickable area.
Here is an example:
markup:
<a href="#p1">
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</a>
css:
h2.services {
font-size: 16px;
}
Here is a demo:
http://jsfiddle.net/j7n3k/
ps - no js or jquery please. Only css and responsive solutions only if possible. Thanks!

Answer 1

You should put the <a> tag inside <h2>. By default, headings have display set to block, which means they will automatically take up all the horizontal space available if the width is not set explicitly. The link contains the heading, so the browser assumes the whole area is a link. If you insert <a> into <h2>, then it wraps only the text and not the entire heading.
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>

Answer 2

this will stop it from expanding:
h2.services {
font-size: 16px;
display: inline-block;
}
http://jsfiddle.net/vimes1984/j7n3k/4/
Read up on the display property and the position property.
DISPLAY
https://developer.mozilla.org/en-US/docs/Web/CSS/display
POSITION
https://developer.mozilla.org/en-US/docs/Web/CSS/position
To style:
you can use
.services{
/*this will style any element with a class of services*/
}
.services a{
/*this will style any a inside of a element with a class of services*/
}