CSSのulタグの:afterのcontentプロパティに指定する空文字。

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の引数に文字を指定したが何も表示されませんでした。
この理由と、このコードにおいて空文字を指定して得られるモノこの２点が知りたいです。
長々とすみません。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のHTMLのコードに以下のCSSを指定しても、contentの要素はどこにも表示されません。

これはなぜなのでしょうか。

今回の問題は、質問者さんが記述した** CSS 内に余分な文字があり、それが文法エラーを発生させていることが原因**です。CSS を以下のように修正してみてください。きちんとcontentプロパティに設定した値が表示されるはずです。

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