cssテキストノードを非表示にして子供を表示

Question

私は以下のようにhtmlとcssセレクタを持っています。私は、テキストノードを非表示にしたいが、その子を残したい。すなわち、テキストノード「ダッシュボード」

<li> 
    <a href="#"> 
     <span class="icon"> 
      <i class="fa fa-home"></i> 
     </span> 
     Dashboard 
    </a> 
</li> 

CSS浮遊テキストノードにアクセスすることができない

li > a > :not(span){ 
    display: none; 
} 

Answer 1

はCSSのみの例です：あなたがHTMLを変更できない場合

しかし、あなたは、コンテナ/リンクに固定の高さ/幅を加えながらoverflow: hiddenとテキストを「クリップ」は、他の技術を試すことができますtext-indentを使用してテキストを非表示にしますが、要素を表示することができます。これはあなたのHTMLをまったく変更する必要はありません。

/* icon styles just for example: */ 
 

 
.icon { 
 
    background: green; 
 
    display: inline-block; 
 
    height: 15px; 
 
    width: 15px; 
 
    border-radius: 50%; 
 
} 
 

 
/* hiding happens here: */ 
 

 
a { 
 
    display: block; 
 
    position: relative; 
 
    text-indent: -9999px; 
 
} 
 

 
a > * { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    text-indent: 0; 
 
}

<ul> 
 
    <li> 
 
    <a href="#"> 
 
     <span class="icon"><i class="fa fa-home"></i></span> 
 
     Dashboard 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

CSSは、理想的な解決策は、例えば、隠蔽のための特定のクラスと<span>内のテキストをラップするであろう。

<span class="link-text">Dashboard</span> 

は、CSSで隠し：

li > a > .link-text { 
    display: none; 
} 

ここで

li > a { 
    width: 20px; 
    height: 20px; 
    overflow: hidden; 
    display: block; 
} 

Answer 3

CSSセレクタは、要素（または擬似要素）ではなく、連続したテキストを選択することができます。

しかし、display: noneのようなものを使用する場合は、font-size: 0を使用して、子要素に必要な値を復元することができます。

@import 'http://fontawesome.io/assets/font-awesome/css/font-awesome.css'; 
 
li > a { 
 
    font-size: 0; 
 
} 
 
li > a > * { 
 
    font-size: 1rem; 
 
}

<li> 
 
    <a href="#"> 
 
    <span class="icon"> 
 
     <i class="fa fa-home"></i> 
 
    </span> 
 
    Dashboard 
 
    </a> 
 
</li>

は、テキストを非表示になりますが、以下の内容が解放されたスペースを取るために移動することはありません visibility: hidden、があります。

@import 'http://fontawesome.io/assets/font-awesome/css/font-awesome.css'; 
 
li > a { 
 
    visibility: hidden; 
 
} 
 
li > a > * { 
 
    visibility: visible; 
 
}

<li> 
 
    <a href="#"> 
 
    <span class="icon"> 
 
     <i class="fa fa-home"></i> 
 
    </span> 
 
    Dashboard 
 
    </a> 
 
    Following text 
 
</li>