Скрыть текст после ввода

Question

Как мне скрыть Some text с помощью этой HTML-структуры?

Я безуспешно пытаюсь это:

input, .checkbox label > input::after{
    display: none;
}

<div class="checkbox">
  <label>
    <input id="post_yes_no" name="post_yes_no" type="checkbox">Some text
    <small><small><br>*Some info</small></small>
</label>
</div>

https://jsfiddle.net/ex26btqd/2/

Answer 1

input::after предназначается для псевдоэлемента ::after, а не для всего, что идет после ввода.

Если вам нужно скрыть это только с помощью CSS, вы можете попробовать следующее: https://jsfiddle.net/ex26btqd/5/

Это не будет действительно скрывать контент - он есть, но с прозрачным цветом.

Если вам нужно нацелиться на текст с помощью css, гораздо лучше обернуть его в элемент, подобный <span> так что это может быть целью css.Текстовые узлы не могут быть нацелены, только элементы.

https://css -tricks.com / forums / topic / how-to-target-only-the-stray-text-inside-a-div /# после 202467

Answer 2

Не существует селектора css для текстовых узлов, вы должны заключить его в p или span, чтобы вы могли стилизовать его или вы можете попробовать использовать visibility вместо display

label{
visibility: hidden;

}

label input, label small {
visibility: visible;
}