CSSのcontentプロパティは属性値を表示させるのに便利

CSSのcontentプロパティは属性値を表示させるのに便利



CSSのcontentプロパティはこれまで、beforeやafter等の疑似要素を扱う際に

.box:before{
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
}

と、基本的には何も入力しないことが当たり前としていました。

しかし最近知ったのですが、例えば

.box:before{
    content: attr(class);
}

とすると、.boxのクラス名を表示させることが出来ます。

他にも

.box:before{
    content: attr(style);
}

とすると、.boxに記述したスタイル設定を、

.box:before{
    content: attr(data-text);
}

とすると、.boxに記述した独自属性(data-text)を表示させることが出来ます。

使い所は難しいですが、自分はjQuery等で要素にクラスを追加したり、スタイルを変更した際のデバックとして値を表示させるようにして使用しています。

今日はここまで
CSSのcontentプロパティは属性値を表示させるのに便利

CSSのcontentプロパティは属性値を表示させるのに便利


開発

CSSのcontentプロパティはこれまで、beforeやafter等の疑似要素を扱う際に .box:before{ content: ''; position: absolute; top: 5px…


関連する記事



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)