45

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

我试过

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

但这没有用。我试图让 CSS 用星号替换跨度的内容，而不引入 jQuery。

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 回答
5

采用：

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

如果您指定了最小字体大小，它将不起作用（浏览器设置）。我只会将此方法用于上一个和下一个按钮，以便屏幕阅读器将读取“上一个”，但您想用 \276e 替换它。因此，请计划文本显示时的外观。

于 2014-06-06T16:18:16.073 回答
1

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

但是，根据旧的 (2003) CSS3 Generated and Replaced Content Module草案，通过简单地设置元素，用生成的内容替换元素的真实内容的目标原则上是可能的，例如content

#myspan { content: "*"; }

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

#myspan { content: url(asterisk.png); }
于 2012-12-27T06:26:47.993 回答
1

这是可能的，但您需要使用visibility:hidden而不是display:none.

有关详细信息，请参阅以下问题中的答案： 如何用 CSS 替换文本？

于 2013-10-31T12:40:22.870 回答
0

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

于 2012-12-27T04:48:33.880 回答