避免使用 CSS :before 和 :after答案

【问题标题】：Avoid using CSS :before and :after避免使用 CSS :before 和 :after
【发布时间】：2015-01-19 15:50:29
【问题描述】：

我需要在小型移动视图上隐藏<label>。

这是html：

<label class="page_createpassword_label" for="page_createpassword">
<span class="page_label_main">Span Text</span>
<span class="page-hide">. </span>
<span class="page-label-hint">
<strong>Information text</strong>
<span class="page-hide">. </span>
<span>More Span text</span>
</span>
</label>

标签当前使用 :before 和 :after 选择器隐藏，但我正试图使其适用于 Android 2.3，所以我不能使用这些。

当前隐藏<label>的CSS如下：

.page-label-hint:before,
.page-rtl .page-label-hint:after {
    display: none;
}

和

.page-label-hint:before {
left: -21px;
}

有没有办法使用其他方法隐藏标签并避免:before 和:after 选择器？我可能是按照display: none 的思路思考的。

谢谢

【问题讨论】：

你能展示一些 HTML 吗？令人困惑的是:before 和:after 选择器将文本添加到元素中，并非严格用于调整布局。文档中真的有<label> 元素吗？
为什么不能只隐藏标签本身？
@MarcAudet 我在我的问题中添加了一些 HTML 代码。感谢您的帮助。
@winseybash 使用您包含的代码，添加或删除提到的 css 没有区别。您能否在堆栈 sn-p 或 jsfiddle.net 中重现该问题？
@JamesMontagne 我知道它似乎没有改变，但在 Android 2.3 或更低版本的移动设备上查看时会改变。当文本需要隐藏时，它会出现在屏幕上。

标签： css css-position pseudo-element

【解决方案1】：

@media all and (max-width: 450px) {

    .page_createpassword_label {

       display:none; 
    }

}

您现在可以在移动视图中隐藏标签。 ;) 可能需要调整媒体查询以满足您的需要。您可以在此处阅读有关媒体查询的信息：http://css-tricks.com/css-media-queries/

享受

【讨论】：