CSSのcontentを動的に切り替える
上記のような記事があったのだが以下の記述であれば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%; } }
商品名