フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

普通の要素にcss content

before, after疑似要素で使用するcontentプロパティですが、IE, Edge以外のブラウザでは普通の要素に対しても画像を指定した場合は適用されます。Chromeではgradient関数もいけました。文字列はいけません。

MDNによるとcontentプロパティの適用対象はbefore, after疑似要素のみとのことです。
developer.mozilla.org/ja/docs/Web/CSS/content

役に立たないCSS情報でした。

/* IE, Edge以外は適用される */
.content-image {
  content: url(image.jpg);
}

/* 適切に表示されたのはChromeだけでした */
.content-gradient {
  content: linear-gradient(#000, #666);
  width: 100px;
  height: 100px;
}

/* 文字列は適用されない */
.content-string {
  content: "hello"
}

デモ

[紹介元] CSSタグが付けられた新着記事 – Qiita 普通の要素にcss content

コメント

記事に戻る

コメントを残す