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等で要素にクラスを追加したり、スタイルを変更した際のデバックとして値を表示させるようにして使用しています。



物草灸太郎

怠けたい。

コメントを残す