CSSを学習していて、リストを横表示にするコードを書いています。
この時、ulタグにafterを指定したcontentプロパティの中に空文字を指定している記述に疑問を持ちました。
afterは、指定したタグの前(:before)、後ろに文字や画像を表示するためのものということは知りました。
ですが、以下のHTMLのコードに以下のCSSを指定しても、contentの要素はどこにも表示されません。
これはなぜなのでしょうか。
該当のソースコード
HTML
1<div class="menu_yoko"> 2 <ul> 3 <li><a href="#">Top</a></li> 4 <li><a href="https://www.yahoo.co.jp">IT</a></li> 5 <li><a href="#">筋トレ</a></li> 6 <li><a href="#">食</a></li> 7 <li><a href="#">News</a></li> 8 </ul> 9</div>
CSS
1.menu_yoko ul{ 2 margin: 0; 3 padding: 0; 4 list-style: none; 5} 6 7.menu_yoko li a{ 8 display: block; 9 padding: 10px; 10 color: #000000; 11 font-size: 14px; 12 text-decoration: none; 13} 14 15.menu_yoko li a:hover{ 16 background-color: rebeccapurple; 17} 18 19.menu_yoko li a: 20 21.menu_yoko ul:after{ 22 content: "iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii"; 23 display: block; 24 /*以下の設定で周りこみを解除している*/ 25 clear: both; 26} 27 28.menu_yoko li{ 29 float: left; 30 width: auto; 31} 32
知りたいこと
テキストだとこのコードの.menu_yoko ul:afterのcontentプロパティの部分は空文字を指定していました。
その必要性がわからなかったので、contentの引数に文字を指定したが何も表示されませんでした。
この理由と、このコードにおいて空文字を指定して得られるモノこの2点が知りたいです。
長々とすみません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/10 12:39