栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

隐藏元素,但显示CSS生成的内容

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

隐藏元素,但显示CSS生成的内容

清洁溶液

您可以使用

visibility: hidden
,但是使用此解决方案,隐藏的内容仍然 会占用空间 。如果这对您而言无关紧要,请按照以下步骤进行:

span {    visibility: hidden;}span:before {    visibility: visible;}

骇人的替代解决方案

另一种解决方案是设置

font-size
跨度 归零
*的价值很小。这种方法的优点:隐藏的内容不会占用任何空间。缺点:您将无法使用诸如em或%之类的相对单位作为
:before
内容的字体大小。

span:before {    content: "Lorem ";    font-size: 16px;    font-size: 1rem;     letter-spacing: normal;    color: #000;}span {    font-size: 1px;    letter-spacing: -1px;    color: transparent;}

jsfiddle上的示例。

更新(2015年5月4日): 使用CSS3,您现在可以使用

rem
(Root
EM)单元来维护
:before
元素中的相对字体大小。(浏览器支持。)


*此帖子的先前版本建议将字体大小设置为零。但是,这在某些浏览器中无法正常工作,因为CSS并未定义将font-size设置为0时的预期行为。为了实现跨浏览器的兼容性,请使用上述较小的字体。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/615272.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号