Trying to hide pseudo element on input focus through ~

I’m trying to hide parents pseudo element ::before hide on input focus. Currently it looks like this

.parent::before{
  content: 'default';
}

.parent:focus-within::before{
  display: none;
}

<div class="parent">
  <input type="text">
  <button>awd</button>
</div>

and it doesn’t seem to work. I don’t want to involve any js/jquery. Would be great if there any vanila css or atleast scss solution.
Thanks in advance!

>Solution :

You can use :focus-within on .parent

The :focus-within pseudo-class matches elements that either themselves match :focus or that have descendants which match :focus.

.parent:focus-within::before {
  display :none
}

Working code below: I have modified the content to show it works perfectly, click on the Input to check

.parent::before{
  content: 'psuedo conetent';
}


.parent:focus-within::before {
  display :none
}

<div class="parent">
  HTML
  <input type="text">
</div>