Is it possible to modify "href" in a stylesheet?

Question

I would like to move the href assignment to CSS.

Something like <a style="href: url('Home.htm');">Home</a> instead of <a href="Home.htm">Home</a>.

Is it possible to do this in CSS?

I have a button at several places in my site whose corresponding URL value, might change in the future. I want to change the target address only in one place, i.e. my CSS file, instead of having to manually change them for every instance of that button.

No, it doesn't work this way. You can `` to bring a file full of CSS into the document, but you can't attach styles to individual DOM elements like you're trying. — Daniel Beck, Jun 22 '17 at 00:03
@Brad I have a button, several places in my site, whose referring place, might get changed in future. I want to change the target address only in my CSS file, instead of changing them for every instance of that button . — M Mahdi, Jun 22 '17 at 00:12
@MMahdi Changing your code should be trivial. If your pages are static, a simple find/replace will do the trick. If you're dynamically generating your pages, then you can choose any number of methods to have that path point somewhere else. If you really wanted to, you could use a JavaScript file which defines the location and then a script which updates the page on load, but beware that crawlers don't always run scripts. Also, if you do update the page location, you should be redirecting from the old URL to the new so that anyone who bookmarked your page can find the new one. — Brad, Jun 22 '17 at 00:38

Jeremy · Accepted Answer · 2017-06-23T19:13:03.957

This behaviour isn't really supported, as explained in other answers. But if you really need this on a page, it's possible to add it using some JavaScript. Used-defined custom variables/properties in CSS need to start with --, and I'll use the name --href-override.

We'll listen for all mousedown and touchstart events on links in the document. These events are useful because they'll always occur before the click is registered. Each time we handle one of these events, we check if the associated link has a --href-override property/variable defined in CSS. If so, we replace the HTML href with the CSS --href-override value, and the browser will automatically use that new value when handling the click event.

function overrideEventTargetHref(event) {
  // if it's the beginning of a click on a link...
  if (event.target.tagName === 'A') {
    var link = event.target;
    var override = getComputedStyle(link).getPropertyValue('--href-override').trim();

    // if the link has an CSS href-override and it's different than the HTML href...
    if (override && override != link.href) {
      // replace the HTML href with the CSS href-override
      link.href = override;
    }
  }
}

window.addEventListener('mousedown', overrideEventTargetHref, false);
window.addEventListener('touchstart', overrideEventTargetHref, false);

.override {
  --href-override: https://stacksnippets.net/;
}

<a href="https://example.com">actually example.com</a>

<a href="https://example.com" class="override">secretly stacksnippets.net</a>

This also work properly for things like middle-clicking to open in a new tab.

This is quite a hack and you usually wouldn't want to do it. But if your situation requires it, you can.

Or just bind the links to check on the custom property, but roll over onto the current href if unset: onclick="return (this.href=this?.style?.getPropertyValue("--href-override")??this.href)". But, realistically, in both cases we're using JS to facilitate the CSS's ability to perform the override. If he's gonna do that, better to make the JS just point it correctly in the first place. Could use dataset just as easily, too, and not muddy the MVC separation, too. — ZenAtWork, Aug 18 '22 at 10:11

score 1 · Answer 2 · answered Jun 22 '17 at 00:03

1

CSS is a styling sheet, so the short answer is no. Also not entirely sure as to what your reason for wanting to is, but if it's due to changing data, use JavaScript or PHP to do this instead. Much easier, logical, and possible.

answered Jun 22 '17 at 00:03

Adrian Higgins

84
8

Yes indeed, it's due to changing data. I was hoping the referring link could be considered as a style. Thanks anyway. – M Mahdi Jun 22 '17 at 00:26
Try using JS or a Back End language for any changing data. Please mark this as final answer too. – Adrian Higgins Jun 22 '17 at 17:09
Thank you so much @Adrian, for your help. I'm not sure what you mean by final answer, you mean the green tick? Can I choose multiple final answers? – M Mahdi Jun 22 '17 at 20:47
No just one, but yes the green checkmark. And no problem! – Adrian Higgins Jun 23 '17 at 19:31

slevy1 · Answer 3 · 2017-06-22T01:13:31.867

The href property stands for hypertext reference. It is not an entity that lends itself to styling; see this resource. If you wish to style how that location's text value appears on a page, you could write code that styles the a tag and if you want to get fancier you could add on a pair of span tags, as follows:

CSS:

a {
font: 14px Arial,Helvetica;
color: #00c;
text-decoration:none;
border: 4px dotted #009;
}

a:hover {
  border: 3px solid #009;
}

span {
color: #f0f;
}

<a href='Home.htm'"><span>Home</span></a>

As for changing the values of the buttons, if you run Linux, it provides various helpful utilities, such grep; see this discussion. Also, see this article.

Is it possible to modify "href" in a stylesheet?

3 Answers3