レスポンシブ（HTML＆CSS）：HTMLのネストされたタグ内の特定のタグを隠すことは可能ですか？

Question

 <div class="sidebar-menu"> 

      <ul> 
       <li><a href="#"><i class="fa fa-truck" aria-hidden="true"></i> Service </a></li> 
       <li><a href="#"><i class="fa fa-trophy" aria-hidden="true"></i> Product </a></li> 
       <li><a href="#"><i class="fa fa-trophy" aria-hidden="true"></i> Agreement </a></li> 
       <li><a href="#"><i class="fa fa-trophy" aria-hidden="true"></i> Contract </a></li> 
      </ul> 

     </div> 

私は画面が小さくなると、私はちょうど "i"（フォントのすばらしいアイコン）の内容を表示し、テキストを取り除きたいという反応性の高いウェブサイトを作りたいと考えています。タグが入れ子になっているという意味をどうやって混乱させているように思えます。モバイルメディアクエリのために、あなたに

Answer 1

はいすることができますに感謝： `

.sidebar-menu li a{ 
font-size:0 
} 
.sidebar-menu li .fa{ 
font-size:16px 
}     

あなたは、（要素を隠し、示すために使用される一般的なCSSプロパティのうちいずれかの

Answer 2

へopacity:0をdisplay:noneを16pxに変更することができ、およびvisibility: hidden）、それらのうちの1つのみが、親が見えない間に要素の子要素を実際に表示できるようにします。スニペットは、フルページモードを使用してウィンドウのサイズを変更見直し

@media (max-width: 500px) { 
    li { 
     visibility: hidden; 
    } 
    i { 
     visibility: visible; 
    } 
    } 

。

SNIPPET

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    font: 400 16px/1 Verdana; 
 
    position:relative; 
 
} 
 

 
.sidebar-menu { 
 
    width: 40vw; 
 
    height: 100%; 
 
    border: 4px ridge grey; 
 
    border-radius: 6px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    font-variant:small-caps; 
 
    resize: both; 
 
    overflow: auto; 
 
} 
 

 
ul { 
 
    list-style:none; 
 
} 
 

 
li { 
 
    line-height: 2; 
 
} 
 

 
a, a:link, a:visited { 
 
    color: blue; 
 
    text-decoration: none; 
 
} 
 

 
a:hover, a:active { 
 
    color: tomato; 
 
} 
 

 
@media (max-width: 500px) { 
 
    li { 
 
    visibility: hidden; 
 
    } 
 

 
    i { 
 
    visibility: visible; 
 
    } 
 
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css"> 
 

 
<div class="sidebar-menu" > 
 

 
    <ul> 
 
    <li><a href="#"><i class="fa fa-truck" aria-hidden="true"></i> Service </a> 
 
    </li> 
 
    <li><a href="#"><i class="fa fa-trophy" aria-hidden="true"></i> Product </a> 
 
    </li> 
 
    <li><a href="#"><i class="fa fa-trophy" aria-hidden="true"></i> Agreement </a> 
 
    </li> 
 
    <li><a href="#"><i class="fa fa-trophy" aria-hidden="true"></i> Contract </a> 
 
    </li> 
 
    </ul> 
 

 
</div>