I am seeking a solution to hide a <label> when viewing on a small mobile device.
Below is the HTML code:
<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>
The current method to hide the <label> is using :before and :after selectors, but this does not work for Android 2.3.
Here is the current CSS code used to hide the <label>:
.page-label-hint:before,
.page-rtl .page-label-hint:after {
display: none;
}
And
.page-label-hint:before {
left: -21px;
}
I am exploring other options to hide the label without using :before and :after selectors. One idea is to use display: none.
Any suggestions would be appreciated. Thank you.