在CSS中使用display:none在元素上,但保留其:after

前端之家收集整理的这篇文章主要介绍了在CSS中使用display:none在元素上,但保留其:after前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以不显示元素,如display:none,但是继续显示:before和/或:after?

我试过了

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

但是没有工作。我试图有CSS替换一个span的内容用星号,而不引入jQuery。

解决方法

不,这是不可能的。

伪元素呈现为像孩子:

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

显示:none隐藏包括所有子项的元素。

编辑1

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

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

Demo

编辑2

但是,如果你真的想使用CSS,你可以使用负文本缩进来隐藏文本和相对定位以显示星号:

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

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

Demo

猜你在找的CSS相关文章