CSS辞典 attr()関数の解説

css辞典 CSS辞典
この記事は約3分で読めます。

属性値を取得するattr()関数の使用方法を記載

スポンサーリンク

概要・使用方法

{ プロパティ:attr(属性)}

「attr()関数」は選択要素の属性値取得しCSSで使うことができます。主に::beforeと::after疑似要素で、contetプロパティと一緒に使用します。

属性

属性名属性値を取得した属性名

サンプルコード1

hrefプロパティの値をattr()関数で取得して、::after疑似要素で表示。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CSS attr関数サンプルページ</title>
    <meta charset="uft-8">
    <style>
    .link::after{
        content: attr(href);
    }
    </style>
  </head>
  <body>
      <p><a href="http://google.com" class="link">URL:</a></p>
  </body>
</html>
実行結果

URL:

chrome 実行サンプル

attr()関数のchromeブラウザの実行結果

Firefox 実行サンプル

attr()関数のfirefoxブラウザの実行結果

edge 実行サンプル

attr()関数のedgeブラウザの実行結果

opera 実行サンプル

attr()関数のoperaブラウザの実行結果

サンプルコード2

data-*属性でメールアドレスの@の前と後ろの部分を記述して、attr()関数で取得し前後の疑似要素でメールアドレスを挿入しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CSS attr関数サンプルページ</title>
    <meta charset="uft-8">
    <style>
    .email::before{
        content: attr(data-account);
    }
    .email::after{
        content: attr(data-domain);
    }
    </style>
  </head>
  <body>
      <span class="email" data-account="info" data-domain="example.com">@</span>
  </body>
</html>
実行結果

chrome 実行サンプル

attr()関数 メールアドレス生成 のchromeブラウザの実行結果

Firefox 実行サンプル

attr()関数 メールアドレス生成 のfirefoxブラウザの実行結果

edge 実行サンプル

attr()関数 メールアドレス生成 のedgeブラウザの実行結果

opera 実行サンプル

attr()関数 メールアドレス生成 のoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました