CODEWITHSUNDEEP
css
jskidd3
jskidd3

Reputation: 4783

Expand clickable area of anchor without affecting position with CSS

In a mobile web application I have recently created there are many anchor tags used throughout. The anchor tags by default have a clickable area that is purely surrounding the text. I am looking to try and expand this area without affecting the position of the anchor tag at all.

enter image description here

The black border shows the current clickable area and the red border shows the clickable area I would much prefer. The first thing you think of is to add padding, but this moves the tag which is the whole reason what I'm asking is a problem. How can I expand the clickable area of all the anchor tags in the application without affecting their positions?

Upvotes: 0

Views: 935

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105873

You can use an absolute positionned pseudo element to increase space where a link stands. basic DEMO: 

a {
  display:inline-block;
  position:relative;
  border:solid;
}
a:before {
  content:'';
  position:absolute;
  top:-1em;
  left:-1em;
  right:-1em;
  bottom:-1em;
  border:solid red;
}

This a technique that can be usefull for menus that close too easily because submenu is too much on the edge.

Upvotes: 4

Related Questions