More than 5 years have passed since last update.

[ CSS3 ] 疑似要素で表示した文字を transform する

Last updated at 2019-02-05Posted at 2018-07-06

まずリンクの頭に擬似要素を使って >> を付けます。
これで同様のリンク全てにいちいち記述しなくてもOkですね。

##HTML

<a href="a001.html" class="linkStyleA">リンクA</a>

##CSS

.linkStyleA::before {
 content: '>>';
}

これを普通に表示した場合、>> の表示が横に長過ぎると感じる事があると思います。
そこで下記のように CSS3の transform を使用して横幅を調整しようとするわけですが、

.linkStyleA::before {
 content: '>>';
 transform: scale(0.5, 1);
}

残念ながらこれでは効きません。
以下のようにする必要があります。

.linkStyleA::before {
 content: '>>';
 display: inline-block;
 transform: scale(0.5, 1);
}

display の指定が追加されているのがお分かりいただけますでしょうか。
本題は以上になります。

【余談】
この指定が可能だと言うことは :hover 時にアニメーションさせることも可能だと言うことですが、それはまた別の機会に。