data属性

「content:attr(data-text);」という馴染みのない記述がある。 CSS の擬似要素（::beforeや::after）の中に入る要素は、CSS の content で指定することができ、attr() を使用すると htmlから属性を取得することができるというものだ。contentには color や background-color などのプロパティも併せて記述できる。

data属性を CSS で編集

content

data属性を使った例 1

• Goods A
• Goods B
• Goods C
• Goods D
• Goods E

<ul class="stock">
  <li data-stock="5">Goods A</li>
  <li data-stock="3">Goods B</li>
  <li data-stock="0">Goods C</li>
  <li data-stock="3">Goods D</li>
  <li data-stock="0">Goods E</li>
</ul>

.stock li[data-stock="0"] {
  color: #ccc;
}

attr(data-text)を使った例 2

• 本格的なアニメーションは、複数のアニメーションを「:checked」をトリガーにして多重構造で動かす。これを実行するには速度を操作する「transition」が最適である。
• flex プロパティの省略、デフォルト、initial、など総当たりで検証を進めて flex プロパティの内容の理解を確定させる。
• Intersection Observer でスクロール中のビューポートを検知し、索引キーワードを捕捉する。モバイルでの解説はBootstrap v5 のモーダルを設置してボタンをタップするとモーダルがフルスクリーンで開く。

<ul id="makingDate">
  <li data-post-date="2023-08-07";>本格的な…最適である。</li>
  <li data-post-date="2023-08-07";>flex プロパティの…確定させる。</li>
  <li data-post-date="2023-07-08";>Intersection Observer …で開く。</li>
</ul>

#makingDate li:before{
	content:attr(data-post-date);
	color: #fff;
	padding: 0 4px;
	background-color: #4ca9f7;
	border-radius: 4px;
	margin-right:1em;
}

attr(data-text)を使った例 3

IAEA は、軍事利用と直接関係のない「原発の安全性」について、強制力を伴う指示や勧告はできない。

attr()

<p class="verification" data-text="(ここに data-text でアクセスされた内容が入る)" style="margin-bottom: 1em;">IAEA は、軍事利用と直接関係のない「原発の安全性」について、強制力を伴う指示や勧告はできない。</p>

p.verification:after {
  content: attr(data-text)"";
  background-color: #4ca9f7;
  color: #fff;
  padding: 0 4px;
}

以下文字の「The IAEA」の部分にマウスを載せるか、ロングタップすると、文字列がチェンジする。

The official name is The IAEA

<p style="border: 1px dashed rgba(0 0 0 / 0.2); padding: 0.5rem; background: url(images/stripe_green.svg) center;">The official name is <a class="defined" href="#" id="style-2" data-replace="The International Atomic Energy Agency"><span>The IAEA</span></a></p>

以下 CSS にはネストを含んでいる。

a.defined {
  overflow: hidden;
  position: relative;
  display: inline-block;

  &::before, &::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
  }

  &::before {
    height: 2px;
    bottom: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  }

  &::after {
    content: attr(data-replace);
    height: 100%;
    top: 0;
    transform-origin: 100% 50%;
    transform: translate3d(200%, 0, 0);
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    color: dodgerblue;
  }
}

a.defined:hover {
  &::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
  }

  &::after {
    transform: translate3d(0, 0, 0);
  }
}

a.defined span {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
a.defined:hover span {
  transform: translate3d(-200%, 0, 0);
}
/* Presentational Styles */
a.defined {
  font-weight: 700;
  text-align: left;
  color: dodgerblue;
  text-decoration: none;
}
.defined {
  width: 100%;
}