1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSAdvent Calendar 2018

Day 7

普通の要素にcss content

Posted at

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

MDNによるとcontentプロパティの適用対象はbefore, after疑似要素のみとのことです。
https://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"
}

デモ

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?