Web で価格表示に「〜(から)」をつける

Web で価格表示に「〜(から)」をつける HTML/CSS

こんにちは、mickです。

Web で値段表示を作成する際、ものにのよっては「〜(から)」の表示が必要になってきます。
なるべくレイアウトを壊さないでおこうとする場合は、単純に文字列を追加するとずれてしまいます。

カフェメニュー
コーヒー500
紅茶450
オリジナルドリンク500〜

そこで、疑似要素の :after の出番です。

疑似要素の :after で「〜(から)」をつける

疑似要素の :after を使えば、レイアウトを壊さずに簡単に「〜(から)」を追加できます。

カフェメニュー
コーヒー500
紅茶450
オリジナルドリンク500

CSS の部分はこれだけでも OK。

.test::after {
  content: '〜';
  position: absolute;
}

HTML ではいろいろ書いてますが、追加したいところに class を設定してやるだけ。

 <table>
    <caption>カフェメニュー</caption>
    <thead>
    </thead>
    <tbody>
        <tr>
            <th scope="row">コーヒー</th>
            <td>500</td>
        </tr>
        <tr>
            <th scope="row">紅茶</th>
            <td>450</td>
        </tr>
              <tr>
            <th scope="row">オリジナルドリンク</th>
            <td class="test">500</td>
        </tr>
    </tbody>
</table>

これなら、li 要素にも追加にも使えます。

  • コーヒー500
  • 紅茶450
  • オリジナルドリンク500

カンペキとはいきませんが、大体は解決すると思います。

まとめ。

Web で価格表示に「〜(から)」をつけるやり方を紹介しました。

せっかく作ったので他に役に立てばと思い投稿しました。
よければ使ってみてください。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/08/19

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