content | WebworksTips

生成コンテンツ内の複数引数の代替テキスト

contentプロパティを使用すると、下記のようにアクセシビリティ用の代替テキストを設定できる。

.has-before-content::before {
  content: url("cat.jpg") / "かわいいネコ";
}

上記のCSSでは、代替テキストが単一の文字列で記述されているが、これはChromeはすでにサポートしている。
Chrome 127では代替テキストに任意の数の要素を設定できるようになり、文字列に加えてattr()関数も設定できる。

.has-before-content::before {
  content: url("cat.jpg") / "かわいい " attr(data-animal);
}