Question

是否可以不显示元素，如display：none，但继续显示：before和/或：after？

我试过

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

但这不起作用。我试图让CSS用星号替换span的内容，而不引入jQuery。

Answer 1

不，这是不可能的。

伪元素像孩子一样呈现：

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

display:none隐藏了包括所有孩子在内的元素。

编辑1

在我看来，JavaScript是你最好的选择。即使没有jQuery更改文本也不难：

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

Demo

编辑2

但是，如果你真的想用CSS做，你可以使用否定text-indent隐藏文本和relative定位来显示星号：

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

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

Demo

Answer 2

这绝对有可能。使用font-size：0px而不是display：none

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

demo here

这种情况下，您只能使用px / pt作为显示文本字体单元。

Answer 3

#myspan       {font-size:0}
#myspan:after {font-size:16px; content:"*"}

如果您指定了最小字体大小，它将无法正常工作（浏览器设置）。我只对前一个和下一个按钮之类的东西使用这种方法，这样屏幕阅读器就可以阅读＆＃34;上一页＆＃34;但你想用\ 276e替换它。因此，请计划显示文字的样子。

Answer 4

我认为这样做的一个非常简单的方法是利用visibility属性。但要注意＆＃34;隐藏＆＃34;元素仍然占用空间。但是如果你对此感到满意，那就让make元素＆＃34;隐藏＆＃34;和伪元素＆＃34;可见＆＃34;

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

一旦掌握了能见度，请随意使用该位置，以避免多余的空间。

类似的东西，

myspan {
      visibility:hidden;
      position:relative;
    }

myspan:after {
      visibility:visible;
      position:absolute;
      left:10px;
    }

Answer 5

正如@bookcasey所解释的那样，在元素上设置display: none也不可避免地隐藏了:after或:before伪元素（因为它们实际上不是在元素之后或之前显示的东西，而是内容在内部添加元素，在其真实内容之后或之前）。

但是，根据旧的（2003）CSS3 Generated and Replaced Content Module草案，通过生成的内容替换元素的真实内容的目标原则上是可行的，只需设置content即可元素，例如

#myspan { content: "*"; }

到目前为止，只有Opera支持这一点。但是，WebKit浏览器也支持替换内容是图像的特殊情况：

#myspan { content: url(asterisk.png); }

Answer 6

这是可能的，但您需要使用visibility：hidden而不是display：none 有关更多详细信息，请参阅以下问题中的答案： How can I replace text with CSS?

Answer 7

您需要将它们分成多个内容DIV块，因为该样式是由子元素继承的。因此，一旦定义了父显示样式，就不可能实现。

在CSS中，在元素上使用display：none，但保留其：after

7 个答案:

编辑1

编辑2