CSSでhoverでafter要素で文字を表示するとプルプルする件

背景

悩んでしまったのでここの記しておきます。
それは今さっき…transformの動きを確認しようとしたときでした。

変化済みの見ても分かりづらいのでhoverしたら設定内容と設定更新をアニメーションでやろうと思ったら…

プルプルプル…  
プルプルプル…  

↓

怖いですねぇ…

解決

困ったときのoverflow: hidden;を入れると治るようです。

main

.b{  
  display:inline-block;  
  transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg);   
  background-color:#aaa;    
  overflow: hidden;/*ここに追加です…*/  
  margin:2px 5px;  
  height:100px;  
  width:100px;  
  transition: all 500ms 0s ease;  
  font-size:5px;/*はみ出ると消えちゃうので文字サイズを調整ください*/  
}  
.b1:hover{transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg); }  
.b1:after{content  :"rotateZ(0deg) rotateX(0deg) rotateY(0deg);";}  
  
.b2:hover{transform:rotateZ(45deg) rotateX(0deg) rotateY(0deg); }  
.b2:after{content  :"rotateZ(45deg) rotateX(0deg) rotateY(0deg);";}  

コード

解決前

See the Pen test test by hashito (@hashito) on CodePen.

解決後

See the Pen test test3 by hashito (@hashito) on CodePen.

解決してないよ！！！

現象としては解決をみたのですが。
原因がわかっていません。。。。

なぜならoverflow: hidden;は内部の要素が外側の要素への与える影響を抑える効果があることを利用しているだけなのです。。。。
だいたい、親要素で問題が有り子要素を消すと解決できる問題はこれで解決できるのですが…

他の解決策

自分は他にも解決策を見つけました。
下記のようなものを入れること

main

line-height:100px;  
font-size:100px;  

See the Pen test test2 by hashito (@hashito) on CodePen.

これを入れると糞のように文字でっかくなるけど消えます。
(ただし、隣の要素がずれますが…）

そもそもline-heightとかfont-sizeの問題であれば逆に０pxにした場合に解決すると思ってたのですが…

申し訳ありませんが分かる方教えていただければ助かります。
無知で申し訳ありません…

#関連する記事

・CSSのtransform:rotate各種動き