The appearance of the placeholder property of <input> elements is managed by the browser and it cannot be separated into two separate elements, which styling just the asterisk would require, nor can it be easily styled as such.
If you wanted to accomplish this, you would likely need to use something to explicitly override the element with a <div> that contained your <span>Name</span><span style='color:red'>*</span> content to overlay on your <input> element itself similar to the scenario mentioned in this related discussion :
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 2px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 2px;
bottom: 2px;
left: 6px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
}
<div class="input-placeholder">
<input type="text" required>
<div class="placeholder">
Name<span>*</span>
</div>
</div>
