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

こんにちは、mickです。

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

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

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

疑似要素の :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 要素にも追加にも使えます。