span is not responding-CodePudding

I need the span to go up when focusing on an input or its validity, but it doesn't react to styles at all HTML:

<div >
        <span >Никнейм или почта</span>
        <input type="text" name="log" id="log"  required="required">
    </div>

CSS:

    position: relative;
    display: flex;
}
.loginput{
    padding: 10px;
    margin-bottom: 10px;
}
.logtxt{
    position: absolute;
    pointer-events: none;
    left: 12px;
    color: gray;
    transition: all ease-in-out .4s;
    padding: 10px;
}
.loginput:valid ~ .logtxt{
    font-size: 2px;
}```

CodePudding user response：

Use the focus pseudo-class and changing the bottom (you can use either top or bottom) is the key.

.login {
  position: relative;
  display: flex;
}

.loginput {
  padding: 15px;
  margin-bottom: 10px;
}

.logtxt {
  position: absolute;
  pointer-events: none;
  left: 12px;
  color: gray;
  transition: all ease-in-out .4s;
  padding: 5px;
  /* IMPORTATN