html - Simulation of a placeholder

Question

I have a Wordpress plugin which I don't want to touch, so I'm hoping my goal can be achieved with CSS only. I have fiddled (no pun intended) with the CSS in Chrome Developer Tool but ended up with a mess all the time.

What I want is the label to be on top of the input field. "On top" meaning Z- not Y-axis. Below is the HTML structure. Thanks in advance for picking on your brains.

<p>
  <label>Name<br>
    <span>
      <input type="text" name="your-name" value="" size="40">
    </span>
  </label>
</p>

Answer 1

With a small markup change and a script you can do this

The script simply append the user value to its value attribute, so one can use CSS to style it

p label {
  position: relative;
}
p label input {
  margin-top: 10px;
}
p label input[required] + span::after {
  content:  ' *';
  color: red;
}
p label span {
  position: absolute;
  top: 2px;
  left: 5px;
  pointer-events: none;
  transition: top .5s;
}
p label input:not([value=""]) + span,
p label input:focus + span {
  top: -20px;
}

<p>
  <label>
      <input oninput="this.setAttribute('value', this.value)" type="text" name="your-name" value="" size="40" required>
      <span>Name</span>
  </label>
</p>