MENU


Pseudo element Selectors

div::after: appends a child to the end of all <div>s
div::before: prepends a child to the front of all <div>s
p::first-letter: the first letter of all <p>s
p::first-line: the first line of all <p>s
p::selection: the portion of <p> selected by the user

RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
   div { margin-bottom:1vh; }
   input + span { position: relative; }
   input + span::before { position: absolute; right: -20px; }
   input:invalid  { border: 2px solid red; }
   input:invalid + span::before { content: '✖'; color: red; }
   input:valid + span::before { content: '✓'; color: green; }
</style>
</head><body>
   <div>
      <label for="fname">First name *: </label>
      <input id="fname" name="fname" type="text" required />
      <span></span>
   </div>
   <div>
      <label for="email">Email *: </label>
      <input id="email" name="email" type="email" required />
      <span></span>
   </div>
</body></html>