各ページのメイン コンテンツ ブロックのすぐ上に、次のような名前付きアンカー アイテムがあります。
<a id="jump"></a>
私のサイトの css には、ブラウザーの幅が 770 未満 (iPad の縦長) の場合にスタイルをリセットするメディア クエリが含まれています。このクエリ ブランチに css を挿入して、すべてのメイン サイト リンクに、そのアンカーへの参照が次のように自動的に追加されるようにします。
<a href="about-us/#jump">About Us</a>
CSS を介して生成されたコンテンツでこれを行うことはできますか?
CSS 3 は強力な生成/置換機能を指定していますが、CSS だけを使用して既存のタグの属性を変更することはできないと確信しています。
次のように、属性の値を読み取って、生成されたコンテンツにその値を含めることができます。
[href]::after { content: footnote; }
[href]::after::alternate { content: attr(href); }
ただし、必要な動作を実現するためのすべての要素が揃っているとは思いません。
または、すべてのリンクにアンカーを含め、メディア クエリに応じてアンカーを別の場所に配置することもできますか? 画面が広い場合、アンカーはページの一番上にある可能性があります。幅が 770 未満の場合、アンカーはページのさらに下に配置されます。