How do I add a red asterisk in the placeholder?
14:52 29 Apr 2021

I was building a form with questions in the placeholder. Now I want a red asterisk for the required fields. Normally we could use span for giving different styles to the asterisk, but in my case, I can't add span in the placeholder.

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/assets/1.png);
  background-position: center;
  background-size: cover;
}

.container {
  width: 80%;
  max-width: 700px;
  min-height: 520px;
  height: auto;
  margin: 8% auto;
  background: #fff;
  border-radius: 15px;
  position: relative;
  padding: 90px 0;
  overflow: auto;
}

h2 {
  text-align: center;
  margin-bottom: 80px;
  color: #333;
}

.container form {
  width: 280px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

form input {
  width: 100%;
  padding: 10px 5px;
  margin: 10px 0;
  border: 0;
  border-bottom: 1px solid #999;
  outline: none;
  background: transparent;
}

 ::placeholder {
  color: #777;
}

.btn-box {
  width: 100%;
  margin: 30px auto 30px auto;
  text-align: center;
}

  

    
Let's Start Building!

https://paulund.co.uk/add-required-asterisk-with-css Is there a way can use this website's method in my code?

html css