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 なんでしょうか。

回答No.1

t_ohta · ベストアンサー

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

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

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