Making only the ::before part of a link clickable in CSS

Question

The titles in my webpage are also a link that anchor to themselves, for accessibility reasons, I cannot really change that.

However, most people would like something in the likeness of Title with only the being a clickable link.

So my html looks like

<h2 id="myid"><a href="#myid">Title</a></h2>

And my CSS (so far):

h2 a::before { content: " "; }

However, I am far from having the wizardry to know what to do next, I tried looking at this question but I don't really know how to "save" the ::before part from being affected.

score 2 · Answer 1 · answered Nov 08 '19 at 16:27

2

It's a bit tricky but you could set a fixed width for the character and overlap the h2::after pseudoelement for the entire length of the element minus the width of the a::before pseudoelement so the text can't be clicked.

It's worth noting that this will reduce the usability of the page so be careful on using this approach

h2 {
  position: relative;
  display: inline-block;
}

h2::after {
  position: absolute;
  z-index: 1;
  content: "";
  right: 0;
  height: 100%;
  width: calc(100% - 1.25em);
}

h2 a::before {
  content: "";
  display: inline-block;
  border-bottom: 1px dashed yellowgreen;
  width: 1.25em;
}

h2 a {
  text-decoration: none;
  color: inherit;
}

<h2 id="myid"><a href="#myid">Title</a></h2>

answered Nov 08 '19 at 16:27

Fabrizio Calderan

120,726
26
164
177

That is awesome thanks! Is there a way to save text selection? – PatJ Nov 08 '19 at 16:49
from the snippet above I can select, copy and paste the "title" text – Fabrizio Calderan Nov 08 '19 at 16:52
On firefox 68esr I can select the full "Title" but not sub parts of it like "tle". – PatJ Nov 08 '19 at 17:00
to be partially selectable the text should be clickable: which is what you don't want to happen – Fabrizio Calderan Nov 08 '19 at 17:02

Making only the ::before part of a link clickable in CSS

1 Answers1