こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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」が座標指定の時に使われるのでしょうか。そしてどうして
上にコピペしてあるプログラムのように書いたとき、なぜ文字の下に線出てくるんでしょうか。
詳しく教えてください。

投稿日時 - 2017-11-30 00:23:57

QNo.9402799

困ってます

質問者が選んだベストアンサー

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

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

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

投稿日時 - 2017-11-30 10:12:13

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)