attr関数
attr関数を使用すると、
CSSでHTMLタグの属性値を取得することができます。
構文
cssセレクタ {
プロパティ: attr(名前, タイプ, 値);
}
パラメータ
| パラメータ | 説明 |
|---|---|
| 名前 | CSSに渡される要素の属性名。 |
| タイプ |
CSSプロパティ値のタイプ。以下のキーワードが有効です：
string (文字列)、color (色)、url (ウェブアドレス)、integer (整数)、
number (実数)、angle (角度)、time (時間)、deg (度)、
およびem、pxなどのCSS単位。
|
| 値 | 属性が存在しない場合や、ブラウザがそれを取得できない場合に使用される値。 |
例
リンクテキストの後に、そのhref属性値を括弧内に表示してみましょう：
html<a href="http://google.com">リンク</a>cssa::after {
content: ' (' attr(href) ')';
}
Результат: