attr()でより簡単に、JSも:has()も使わない脚注のデモ

脚注をセンターに表示することで左右のはみだしを回避

脚注の内容はdata属性に記述、それをCSS関数のattr()で読み込み脚注のbefore属性で表示

ここで使っているbefore疑似要素のcontent :attr(data-text);というdata属性を読み込む変数のような使い方は、すでに2010年代には主要ブラウザで実装されていた。

この1~2年、CSSの進化がめざましく、なんか革命でも起きてんの?と感じる毎日です。
それは疑似クラスの:has()を調べてて、『あれ!今までのCSSと違う』っと感じたことが発端です。
この気になるCSS、何が違うって、子要素の状態変化や種類に応じて親要素のスタイルを随時変更可能、つまり設定された要素が周囲の状況を自分で判断し、自律的に振る舞うようになっています。
平たく言えばCSSのIF文。AIは大げさでも、ロジックを持った、考え始めたといっても言い過ぎじゃないです。

この1~2年、CSSの進化がめざましく、なんか革命でも起きてんの?と感じる毎日です。
それは疑似クラスの:has()を調べてて、『あれ!今までのCSSと違う』っと感じたことが発端です。
この気になるCSS、何が違うって、子要素の状態変化や種類に応じて親要素のスタイルを随時変更可能、つまり設定された要素が周囲の状況を自分で判断し、自律的に振る舞うようになっています。
平たく言えばCSSのIF文。AIは大げさでも、ロジックを持った、考え始めたといっても言い過ぎじゃないです。