NEW/UPをCSSのみで追加する

NEWやUPなど一時的に表示したい文字をHTMLのタグ修正せずにCSSのみで差し込みするサンプルを掲載しています。「::after」を使用することで、指定タグの後ろに文字を追加することができます。「::before」を使用すれば、前に文字を追加できます。

また、アニメーションを利用することで「点滅」「回転」などのアニメーションを利用することで、さらに目立つ文字とすることが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

サンプルは<div>で構成されたメニューを想定し、2つ目のメニューに「NEW」を付けています。このため、使用しているタグの状況によりCSSの変更が必要となりますのでご注意ください。

<div class="menuListArea">
  <div class="menuList" id="makeImg">
    <div>ファッション</div>
    <div>スポーツ</div>
    <div>ビューティー</div>
    <div>・・・</div>
  </div>
</div>

 /* === NEWの差し込み定義 ======================================= */
 /* このサンプルは、2行目のメニューにNEWを付けています            */
 /*                                                               */
.menuList > div:nth-child(2)::after {
  display        : inline-block;       /* インラインボックス定義  */
  content        : "NEW";              /* 表示する文字            */
  color          : #ff0000;            /* 文字色                  */
  font-weight    : bold;               /* 太字                    */
  font-size      : 10pt;               /* ベースの文字サイズ      */
  letter-spacing : -1px;               /* 文字間隔詰め            */
  line-height    : 1;                  /* 1行の高さ               */
  vertical-align : top;                /* 基準の高さ位置          */
  margin         : 0;                  /* 外余白なし              */
  padding        : 2px;                /* 反転時の内余白          */
  transform      : scale(0.6)          /* 文字サイズ変更          */
                   translateX(-30%);    /* 横位置調整              */
                                       /* ブリンクのアニメ指定    */
  animation      : newAnime .7s infinite alternate;
}
@keyframes newAnime {
 100% { color      : #ffffff;          /* ブリンク時の文字色      */
        background : #ff0000;          /* ブリンク時の背景色      */
      }
}