2

変更できない HTML コードがあります。これを行うために JS/jQuery を使用したくありません。クロスブラウザー対応の CSS を使用して実行したいと考えています。

HTML は次のようになります。

<ul class="list">
    <li class="item">
        <a href-"#">Item One</a> |
    </li>
     <li class="item">
        <a href-"#">Item Two</a> |
    </li>
    <li class="item">
        <a href-"#">Item Three</a> |
    </li>
</ul>

リストを分割するために、そこにそれらの愚かなパイプがあります。<a>それらを非表示にして、要素を表示したい。テキストの色を背景と同じにしたいだけではありません。と同等のものが欲しいdisplay: none;

4

2 に答える 2

6

font-sizeのを 0 に設定liして透明colorにし、 でこれらのプロパティを通常の状態に戻すことができaます。

li.item {
    font-size: 0;
    color: transparent;
}

li.item a {
    font-size: 16px;
    color: #000;
}

これにより、liテキストが非表示になり、サイズがまったくなくなりますが、a要素のスタイルは維持されます。

JSFiddle デモ。

ここで透過性を使用したことに注意してください (私が思い出す限り)、Safari にはサイズが 0 に設定されている場合にフォントを完全に非表示にするという問題があります。

于 2013-10-28T19:10:33.920 に答える
2

単に：

.item {
    color: transparent;
}

.item a {
    color: #000;
}

JS フィドルのデモ。

これは、 のテキストがli非表示/透明であることを意味します (ただし、選択することはできます) が、a要素のテキストの色は表示されます。

于 2013-10-28T19:10:19.857 に答える