激安CSSのアレンジ

Qiitaにて 安い!!お得!!激安CSS!! というものが投稿されていました。
スーパーや家電量販店のチラシで見る価格表示のスタイルですね。
先頭文字や単位にタグ付けをしなくてはならなくて、ちょっと実用的ではないと思ったのでアレンジしてみました。

See the Pen discountPrice by Mitsuhiro Kine (@lab3-34) on CodePen.

1つのタグで数値をくくればOKというようにしてみました。
先頭文字だけが拡大されるcssのみで実現バージョンと、最初の”,”以前は文字を大きくする使用らしいのでjsでゴニョゴニョするバージョンの2種類作ってみました。
jsが雑なのはご愛嬌ということで…

何度も値を書くのが無駄に思えてしまうので、単位とかを疑似要素 after でつけるのが好きなのですが、実際の所どのように実現しているのが多いんですかね。
価格とかサイズで検索する機会あまりないと個人的に思っているので、この部分のSEOは気にしなくて良いかなって思っちゃってたりします。。
とか言って、先日物件調べるときに”土地名 00㎡” とかで検索したんですけどね…

とりあえず、こういうのやると気晴らしになりますよねw