<form class="c">
  <h2>Demo for <code>:required</code> and <code>:optional</code></h2>

  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" required class="form-control" />
    <span class="msg"></span>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" required class="form-control" />
    <span class="msg"></span>
  </div>
  <div class="form-group">
    <label for="address">Address:</label>
    <input type="text" id="address" class="form-control" />
    <span class="msg"></span>
  </div>

  <p>The red asterisks and "(optional)" text are added via CSS, based on the presence or absence of the <code>required</code> attribute.</p>

</form>

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2vw;
  background: #eaeaea;
}
form {
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid #aeaeae;
  margin: 10px;
  min-width: 50vw;
}
.c {
  width: 500px;
  margin: auto;
}

.p {
  text-align: center;
  font-size: .9em;
  padding-top: 100px;
}

form div {
  padding: 10px;
}
h2 {
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 3px double #e83e8c;
}
.form-group {
  display: flex;
  align-items: center;
  
  label {
    min-width: 80px;
    text-align: right;
  }
  
  .msg {
    min-width: 80px;
    text-align: left
  }
  
  .form-control {
    flex: 1;
    margin: 0 10px;
  }
}

input:required ~ .msg:after {
  content: '*';
  color: red;
}

input:optional ~ .msg:after {
  content: '(optional)';
}