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

解決済みの質問

CSS after before

.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のアニメーションを使ったアンダーラインのプログラムです。

このプログラムの上から七行目に使われている before なんですが before はこのプログラムではどういゆ役割(仕事)なんですか。なぜ before なんでしょうか。

投稿日時 - 2017-11-30 00:35:28

QNo.9402803

困ってます

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

:before 自体の役割はこちらに解説されています。
https://developer.mozilla.org/ja/docs/Web/CSS/::before

例示されている CSS では .text クラスの要素の前に幅0pxで高さ2pxの要素を作り .text クラスの要素に重なるよう配置しています。
:hover で指定されているようにマウスカーソルが乗っかると幅が100%まで広がる事で下線が出てくる仕組みです。

なお、CSS はプログラムではなく単なる設定情報です。

投稿日時 - 2017-11-30 09:55:25

ANo.1

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

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

回答(1)