::before/::after al servicio de la intención

Explicación:

• ::before añade un asterisco rojo a los <label> con atributo for, indicando que son campos obligatorios. Es una señal visual inmediata sin alterar el HTML.
• ::after añade un icono de sobre ✉ al texto del <button>, reforzando la intención de “enviar”.
• De este modo, ::before y ::after se usan como elementos auxiliares que enriquecen la experiencia de usuario sin ensuciar el marcado.

Email Nombre Enviar

 

HTML


<form>
  <label for="email">Email</label>
  <input 
    id="email" 
    type="email" 
    placeholder="tu@email.com" 
    required>

  <label for="nombre">Nombre</label>
  <input 
    id="nombre" 
    type="text" 
    required 
    minlength="3">

  <button type="submit">Enviar</button>
</form>

CSS

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

label[for]::before {
  content: "*";
  color: #e74c3c;
  margin-right: .3rem;
}

button::after {
  content: " ✉";
  margin-left: .5rem;
}