在 CSS 中，在元素上使用“display:none”，但保留它的“:after”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14049423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In CSS use "display:none" on the element, but keep its ":after"
提问by JPM
Is it possible to not display an element, as with display:none, but continue to display the :beforeand/or :after?
是否可以像display:none一样不显示元素，但继续显示:before和/或:after？
I tried
我试过
#myspan {display:none}
#myspan:after {display:inline; content:"*"}
but that didn't work. I'm trying to have CSS replace the content of a span with an asterisk, without introducing jQuery.
但这没有用。我试图让 CSS 用星号替换跨度的内容，而不引入 jQuery。
采纳答案by bookcasey
No, it is not possible.
不，这是不可能的。
Pseudo elements are rendered like children:
伪元素像子元素一样呈现：
<span id="myspan">whatever<after></span>
And display:nonehides the element including all children.
并display:none隐藏包含所有子元素的元素。
EDIT 1
编辑 1
JavaScript is your best option in my opinion. Even without jQuery changing text is not hard:
在我看来，JavaScript 是你最好的选择。即使没有 jQuery 改变文本也不难：
document.getElementById("myspan").innerHTML = "*";?
EDIT 2
编辑 2
However, if you really want to do it with CSS, you can use negative text-indentto hide the text and relativepositioning to show the asterisk:
但是，如果你真的想用 CSS 来做，你可以使用负数text-indent来隐藏文本和relative定位以显示星号：
#myspan {
text-indent: -9999px;
display: block;
}
#myspan:before {
content: '*';
position: absolute;
top: 0;
left: 9999px;
}
?
?
回答by PiyushW
I think a very easy approach to doing this is to exploit the visibilityproperty. But note that a "hidden" element still takes up the space. But if you are okay with that, just make make the parent element "hidden" and pseudo element "visible":
我认为这样做的一个非常简单的方法是利用可见性属性。但请注意，“隐藏”元素仍会占用空间。但是，如果您对此感到满意，只需使父元素“隐藏”并使伪元素“可见”：
#myspan {visibility:hidden}
#myspan: after {visibility:visible}
Once you have the visibility taken care of, feel free to play around with the position so that excess space is avoided.
处理好能见度后，请随意调整位置，以避免多余的空间。
Something like,
就像是，
myspan {
visibility: hidden;
position: relative;
}
myspan:after {
visibility: visible;
position: absolute;
left: 10px;
}
回答by bard
It's definitely possible. Use font-size: 0pxinstead of display: none:
绝对有可能。使用font-size: 0px代替display: none：
#myspan {
/* display: none; */
font-size: 0px;
}
#myspan:after {
/* display: inline; */
font-size: 16px;
content: "*"
}
In this case you can only use px/pt for the display text font units.
在这种情况下，您只能使用 px/pt 作为显示文本字体单位。
回答by JonShipman
Use:
用：
#myspan {font-size:0}
#myspan:after {font-size:16px; content:"*"}
If you have a min-font size specified, it won't work (browser setting). I'd only use this method for things like previous and next buttons so that screen readers will read "Previous", but you want to replace it with a \276e. So plan for what it will look like withthe text showing up.
如果您指定了最小字体大小，它将不起作用（浏览器设置）。我只会将这种方法用于上一个和下一个按钮之类的内容，以便屏幕阅读器读取“上一个”，但您想将其替换为 \276e。因此，计划将会是什么样子与文本显示出来。
回答by Jukka K. Korpela
As explained by @bookcasey, setting display: noneon an element unavoidably hides the :afteror :beforepseudo-element too (because they are not really something displayed after or before an element but content added insidethe element, after or before its real content).
正如@bookcasey 所解释的，display: none在元素上设置也不可避免地隐藏了:after或:before伪元素（因为它们实际上并不是在元素之后或之前显示的内容，而是在元素内部，在其实际内容之后或之前添加的内容）。
But the goal of replacingan element's real content by generated content is in principle possible, according to the old (2003) CSS3 Generated and Replaced Content Moduledraft, by simply setting contenton the element, e.g.
但是，根据旧的 (2003) CSS3 Generated and Replaced Content Module草案，通过简单地设置元素，例如，通过生成的内容替换元素的真实内容的目标原则上是可能的content
#myspan { content: "*"; }
So far, only Opera supports this. But a special case where the replacing content is an image is supported by WebKit browsers, too:
到目前为止，只有 Opera 支持这一点。但是 WebKit 浏览器也支持替换内容是图像的特殊情况：
#myspan { content: url(asterisk.png); }
回答by user280109
It is possible, but you need to use visibility:hiddeninstead of display:none.
这是可能的，但您需要使用visibility:hidden而不是display:none.
See the answers in the following question for more detail: How can I replace text with CSS?
有关更多详细信息，请参阅以下问题中的答案： 如何用 CSS 替换文本？
回答by devXen
You need to break them into multiple content DIV blocks because the style is inherited by child elements. So it's not possible once the parent display style is defined.
您需要将它们分成多个内容 DIV 块，因为样式是由子元素继承的。所以一旦定义了父显示样式就不可能了。
