CSS 座標

質問

.text{
position: relative;
display: inline-block;
font-size: 2em;
}

.text:before{
position: absolute;
top: 1.3em;
left: 0;
content: "";
display: inline-block;
width: 0;
height: 2px;
background: #34BBF3;
transition: 2s;
}

.text:hover:before{
width: 100%;
}

このプログラムはhttps://qiita.com/junya/items/4805404624292401030dからコピペしたCSS3のアニメーションを使ったアンダーラインのプログラムです。

このプログラムの上から九行目の「em」を使っているところ。
「em」について調べてみましたが、font-size　で使うときの説明しか出てきません。なぜ「em」が座標指定の時に使われるのでしょうか。そしてどうして
上にコピペしてあるプログラムのように書いたとき、なぜ文字の下に線出てくるんでしょうか。
詳しく教えてください。

回答No.1

t_ohta · ベストアンサー

em はベースとなるフォントサイズを 1 とした相対的なサイズ指定の単位です。

.text:before では下線のための要素を作っています。
.text 要素のフォントサイズが固定値ではないので、フォントサイズをベースに1.3倍の長さ分下にずらすという意味で使われています。

.text:before で作られた要素は .text クラスの要素の左上を起点に下へフォントサイズの 1.3倍ずれ、左から 0 ずれた場所が要素の起点となり、そこから2pxの高さを持つ要素で背景色が #34BBF3 という色になっています。
.text クラスのフォントサイズの 1.3倍下にずれてますから。文字の下に出てきます。