Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Normal text links are present:

<a href="projects.html">Projects</a>

Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'?

a {
font-size: 50px;
background-color: yellow;
display: inline-block;
height: 25px;
}

The defined yellow background has a height of 25px, yet it doesn't affect the clickable area. The entire text remains clickable.

Refer to https://jsfiddle.net/m4g2b7tu/

a {
  font-size: 50px;
  background-color: yellow;
  display: inline-block;
  height: 25px;
}
<a href="projects.html">Projects</a>

htmlcss

Answer №1

One clever trick to expand the clickable area of an element is by using pointer-events and a pseudo element. Check out this example for more information: https://jsfiddle.net/xyz123/

a { 
font-size: 40px;
background-color: green;
display: inline-block;
height: 20px;

/* updated styling */
position:relative;
pointer-events:none;
}
a:after  {
  content:'';
  position:absolute;
  /* define area placement */
  width:100%;
  height:50%;
  left:0;
  top:75%;
  /* reset pointer-events */
  pointer-events:auto;
  /* optional but ensures it stays on top */
  z-index:1;
  
  /* helpful for debugging, gives it a background color for visibility 
  background:gray;
  */
}

/* demo */
a+a:hover:after {background:#0008}
<a href="services.html">Services</a> <a href="">Click me too</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

jqueryhtmlajaxbootstrap-modal

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

cssflexbox

Is there a way to identify a null dynamic source in Html5 audio?

The HTML5 audio element in my code does not point directly to an mp3 file, but rather to an action in a controller. This action returns either an mp3 file (FileResult) or null, which can take up to 1 minute to retrieve. To handle this delay, I have impleme ...

jqueryhtmlasp.net-mvcgoogle-chromehtml5-audio

What is the best way to smoothly hide and reveal a flex child element?

I am looking to create a flex container where the child element can smoothly animate to shrink and grow, while the remaining child elements expand to fill in the space. The method I have found involves setting the max-width to 0px and the borders' wi ...

htmlcss

When using Google Chrome, I noticed that it automatically creates an <object> element next to my <video> tag

Recently, I encountered an issue with a video tag that included both mp4 and ogv files. While the video played smoothly on most devices and browsers, Google Chrome started creating a strange black box near the video in certain cases. This new tag appeare ...

htmlgoogle-chromevideo

Is there a way to execute a jar file using JavaScript?

Hello, I'm new to this and still learning. I have a jar file that takes one parameter and returns a JSON with the result. Could someone please advise me on how to run my jar using JavaScript? I've attempted the following code but it's not wo ...

javascripthtmljar

Encountering an issue with usememo in React js?

I'm currently experimenting with the useMemo hook in React JS. The goal is to sort an array of strings within a function. However, when I return the array from the function, only the first element is being returned. Can someone please assist me in ide ...

javascripthtmlreactjsarraysjavascript-objects

Enhancing Title and Meta Tags with Decorative Styles

Looking to style the <title><p>AAA</p></title> and <meta name="decrition" content="AAA">. But when I added <p> and applied CSS with: p{color:red;size:1000px} The title is being displayed as <p>AAA</p> Any ...

htmlcsstitle

Creating a jQuery alertbox that is triggered by specific elements in an anchor tag

I am working on an HTML page that contains 50 A tags. I am trying to figure out how to create an alert based on a specific element inside the A tag. Here is an example of what I am looking for: <a href "something">click to see the alert</a> ...

jqueryhtml

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

javascripthtmlcss

Toastr service experiencing issues on Internet Explorer browser

While implementing toastr notifications in my Angular application, I encountered an issue with compatibility across browsers. Specifically, the ngx-toastr module functions properly in Chrome and Firefox, but not in Internet Explorer. Interestingly, it wo ...

cssangularngx-toastr

Ways to emphasize text in a h2 header without affecting other elements

One particular HTML block is causing me some trouble: <h2><span class="numbers">1.1 </span>header text</h2> It's important to note that I did not write this HTML code, so my options for changing it are limited. Howev ...

htmlcss

Using Razor view form with various submit buttons

In my razor view, I have a BeginForm command surrounded by a loop that generates an HTML table with a submit button in each row. My concern is how do I identify which specific row the submitted form corresponds to when sending it back to the controller? T ...

htmlasp.net-mvcasp.net-mvc-3razor

I seem to be having trouble locating the element using its xpath

I am in search of the xpath element below. What would be the xpath? precise location (GPS and network-based) Below is the HTML code: <div class="permission-bucket" jsinstance="1" jstcache="75"> <div class="bucket-icon-and-title" jstcache="87"&g ...

htmlxpath

What sets srcset apart from media queries?

Can you explain the contrast between srcset and media query? In your opinion, which is more optimal and what scenarios are ideal for each? Appreciate it! ...

javascripthtmlcssmedia-queriessrcset

Showing a placeholder image in the absence of any image

I need help with displaying a default image when there is no uploaded image in the CMS. Here is the code I have so far: <li><img alt="" class="img-responsive" src=" <? if($artikel[0]['images'] == '' ...

phphtmlarrays

Display or conceal elements based on the screen size using Bootstrap 3 classes

While this may seem straightforward for some, the reality is quite different. I have two images that need to be displayed based on screen size. In my HTML code, I used classes like hidden-md, hidden-sm, and hidden-xs assuming they would only show on larg ...

htmlcsstwitter-bootstrap

What is the best way to showcase the outcome using the <table> tag in HTML with columns containing 50 records each, except for the final column?

I have developed a program that is currently creating 540 different numbers. My goal is to present these 540 distinct numbers in columns with 50 records each (except for the last column where there may be fewer than 50 records) using the HTML <table> ...

phphtmlfor-loopif-statementhtml-table

Trigger Click event when clicking on navigation link using the ID

Currently, I am working with a WordPress theme that includes a page with 10 tabs that open individually. My approach so far has been to provide links to all tabs in the navigation bar. For instance, href="mylink.com/#tabid" It works perfectly when the p ...

jqueryhtmlwordpress

div positioned on top of additional div elements

My HTML code consists of simple div tags <div class="left">Project Name: </div> <div class="right">should have a name</div> <div>Shouldn't this be on a new line?</div> These classes are defined in a stylesheet as ...

htmlcss