动态添加#anchors通过CSS媒体查询链接和生成的内容

Question

在我的每个网页，只是主要内容块以上，我有一个名为锚项目，像这样：

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

我的网站的CSS包含媒体查询，当浏览器宽度小于770（iPad肖像）时重置样式。我想插入CSS这个查询分支，让所有我的主网站链接会自动与一个参考锚像这样附加：

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

我能做到这一点通过CSS生成的内容？

Answer 1

CSS 3指定了功能强大的generate/replace capabilitie，但我确定无法仅使用CSS修改现有标记的属性。

它可以读取属性的值，包括生成的内容该值，如：

[href]::after { content: footnote; } 
[href]::after::alternate { content: attr(href); } 

不过，我不认为所有的碎片都没有让你的行为想。

或者，您可以在您的链接中包含锚点全部，然后根据您的媒体查询以不同的方式定位锚点？如果屏幕很宽，锚点可能位于页面的顶部。如果宽度小于770，则锚点将位于页面的下方。