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

Question

在我的每个页面中，就在主要内容块的上方，我有一个命名的锚项，如下所示：

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

我网站的 css 包含一个媒体查询，当浏览器宽度小于 770 (iPad Portrait) 时会重置样式。我想将 css 插入到这个查询分支中，这样我的所有主站点链接都会自动附加对该锚点的引用，如下所示：

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

我可以通过 CSS 生成内容吗？

Answer 1

CSS 3 指定了强大的生成/替换功能，但我很确定您不能仅使用 CSS 修改现有标签的属性。

可以读取属性的值并将该值包含在生成的内容中，例如：

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

但是，我不认为所有的部分都可以得到你想要的行为。

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