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

締切り済みの質問

プログラム 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: "";」はどうして何も書かないんですか。
これをかいて何の意味があるんでしょう。

投稿日時 - 2017-11-28 23:06:12

QNo.9402438

困ってます

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

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

回答(1)

ANo.1

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

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

投稿日時 - 2017-11-29 01:25:28

お礼

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

投稿日時 - 2017-11-29 22:56:34