JavaScriptを使わずにCSSのcontentを動的に変更する方法

CSSのcontentを動的に切り替える

[glink url="http://www.tam-tam.co.jp/tipsnote/html_css/post9753.html" g_title="【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法" g_dsc="CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。"]

上記のような記事があったのだが以下の記述であればJavaScriptを使用せずにCSSのcontentを動的に変更することができる。

/* <div class="item">商品名</div> */
.item {
  position: relative;
  line-height: 20px;
}

.item::before,
.item::after {
  display: inline-block;
  width: 80px;
  height: 20px;
  border-radius: 10px;
  margin-right: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.item::before {
  content: "NEW";
  animation: change 1s linear 0s infinite alternate;
  background: #C00;
}

.item::after {
  content: "新発売";
  position: absolute;
  top: 0;
  left: 0;
  animation: change 1s linear -1s infinite alternate;
}

@keyframes change {
  0% {
    text-indent: 0%;
  }
  49.99% {
    text-indent: 0%;
  }
  50% {
    text-indent: -100%;
  }
  100% {
    text-indent: -100%;
  }
}

商品名

CSSのcontentを動的に切り替える

関連した記事