How to add "skip to content" anchors to links dynamically via CSS

JavaScript
1

In each of my pages, just above the main content block, I have a named anchor item like so:

<a id="jump"></a>

My site’s css contains a media query that resets styles when the browser width is less than 770 (iPad Portrait). In order to save the mobile user having to scroll past my top menu links, I’d like to insert css into this query branch so that all my main site links are automatically appended with a reference to that anchor like so:

<a href="about-us/#jump">About Us</a>

Can I do this with generated content via CSS?

I tried this but its not what I’m after:

.menu.nav a[href]:after {content:'#jump'; }
2

Nope it’s not possible with CSS. Javascript, yes, but CSS can’t dynamically change the HTML :).

I don’t know if you know what :after pseudo classes do. Basically with yoru code it creates the <span> element below

<a href=“#jump”>text<span></span></a>

:before does the span BEFORE the text. Content:“”; will put text in there.

3

Thanks Ryan. I appreciate the help.

I suppose this should go into the javascript section then.

4

OK - moved as requested. :slight_smile:

5

How bout this…it will be a much better for accessibility if you put it directly into the HTML then hide it with CSS for desktop users…Now you are no relying and hoping the user’s mobile browser supports or had Javascript enabled.

6

That works for the named anchors inside the content. However, the nav links will need to be hardcoded with the anchors, no?

7

What? I’m not sure I follow…
All you need is one link at the very top that says “Skip to content”.
Done.