How to add an asterisk to a placeholder inside an input?

Question

css

Hello!
How to insert an asterisk?

I found one way, but it's a bit unfinished.
When clicked, it disappears, but if left empty, it does not appear.

<div class="container">
  <div class="col-md-4">
    <form>
      <div class="form-group">
        <input type="email" type="email" class="form-control" id="exampleInputEmail1" onclick="hideIcon()" placeholder="Email Address">
      </div>
    </form>
  </div>
</div>

.form-group {
  padding: 50px 0;
  background-image: url("../img/star.png");
  background-repeat: no-repeat;	
}

function hideIcon() {
  document.getElementById('exampleInputEmail1').style.backgroundImage = 'none';
}

Who does what?
Thanks to all!

Answer 1

I'd say it's a designer's mistake and left the asterisk greyed out.
If it doesn't work, you can do it like this https://jsfiddle.net/Lo33tnbp/

Answer 2

It seems to me, or does your input sin with the absence of name with the redundancy of type ?
js can be used
$('input[name=email]').val('e-mail*');

Answer 3

.placeholder:after {
  position: absolute;
  top: 0;
  right: 0;
  color: red;
  content: '*';
}