プログラム CSS3 アニメーション

質問

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

このプログラムの十一行目の「content: "";」はどうして何も書かないんですか。
これをかいて何の意味があるんでしょう。

回答No.1

4017B

CSSの仕様と言うか、before/after 要素に何らかのビジュアル的な要素を指定する際、content: が無指定だと画面上では何も表示する存在が無いとブラウザ側が解釈するため何も表示されないからです。

このため何でも良いので content: に何かを指定して置く事が必須条件となるためです。例文の様に目的な背景画像として擬似的に線を表示させる事ですので、その邪魔にならない様に何も無い存在、つまり空文字としての content:''; を指定するのが一般的な作法です(noneとかだとやはり表示無しとなる)。

お礼

なるほど。初心者の自分でもある程度がわかりました。とても丁寧な説明ありがとうございました。