45

display:noneのように要素を表示せずに、 :beforeおよび/または:afterを表示し続けることは可能ですか?

私は試した

#myspan       {display:none}
#myspan:after {display:inline; content:"*"}

しかし、それはうまくいきませんでした。jQueryを導入せずに、CSSでスパンのコンテンツをアスタリスクに置き換えようとしています。

4

7 に答える 7

27

いいえ、できません。

疑似要素は子のようにレンダリングされます。

<span id="myspan">whatever<after></span>

すべてdisplay:noneの子を含む要素を非表示にします。

編集1

私の意見では、JavaScript が最良の選択肢です。jQuery がなくても、テキストを変更するのは難しくありません。

document.getElementById("myspan").innerHTML = "*";​

デモ

編集2

ただし、本当に CSS でそれを行いたい場合は、ネガティブtext-indentを使用してテキストを非表示にし、relative配置を使用してアスタリスクを表示することができます。

#myspan {    
    text-indent: -9999px;
    display: block;
}

#myspan:before {
    content: '*';
    position: absolute;
    top: 0;
    left: 9999px;
}

デモ

</p>

于 2012-12-27T04:42:15.073 に答える
11

それは間違いなく可能です。font-size: 0pxの代わりに使用display: none:

#myspan {
    /* display: none; */
    font-size: 0px;
}

#myspan:after {
    /* display: inline; */
    font-size: 16px;
    content: "*"
}

デモはこちらです。

この場合、表示テキストのフォント単位には px/pt のみを使用できます。

于 2014-10-06T19:53:58.333 に答える
10

これを行うための非常に簡単なアプローチは、可視性プロパティを利用することだと思います。ただし、「非表示の」要素は依然としてスペースを占めることに注意してください。ただし、それで問題ない場合は、親要素を「非表示」にし、疑似要素を「表示」してください。

#myspan        {visibility:hidden}
#myspan: after {visibility:visible}

視認性に気を配ったら、余分なスペースを避けるために自由に位置をいじってみましょう。

何かのようなもの、

myspan {
    visibility: hidden;
    position: relative;
}

myspan:after {
    visibility: visible;
    position: absolute;
    left: 10px;
}
于 2015-07-28T20:32:48.257 に答える
1

visibility:hidden可能ですが、の代わりに使用する必要がありますdisplay:none。

詳細については、次の質問の回答を参照してください: テキストを CSS で置き換えるにはどうすればよいですか?

于 2013-10-31T12:40:22.870 に答える
1

@bookcasey で説明されているようdisplay: noneに、要素を設定すると、:afterまたは:before疑似要素も非表示になります (これらは実際には要素の前後に表示されるものではなく、要素内、実際のコンテンツの前後に追加されるコンテンツであるため)。

しかし、古い (2003) CSS3 Generated and Replaced Content Moduleドラフトによれば、要素の実際のコンテンツを生成されたコンテンツで置き換えるという目標は、要素に設定するだけで、原則として可能です。content

#myspan { content: "*"; }

これまでのところ、これをサポートしているのは Opera だけです。ただし、置換コンテンツが画像である特殊なケースは、WebKit ブラウザーでもサポートされています。

#myspan { content: url(asterisk.png); }
于 2012-12-27T06:26:47.993 に答える
0

スタイルは子要素に継承されるため、それらを複数のコンテンツDIVブロックに分割する必要があります。したがって、親の表示スタイルが定義されると、それは不可能になります。

于 2012-12-27T04:48:33.880 に答える