I can probably safely assume the reason why OP (aka Original Poster) won't use a <span> is because <input> has width: 100%. Whenever an display: inline (ie <span>) or inline-block proceeds an element that has width: 100%, that element is forced to occupy the space underneath the preceding element of width: 100%.
Simply decrease the width of the <input> and use a <span>
Demo A is exactly like OP's demo with the exception of the <input> having width: 90% and a <span class='asterisk'>*</span> proceeding it.
Demo B and Demo C are improved versions that:
- uses semantic elements like
<fieldset> and <legend>.
- has some ineffective styles removed.
- has the
<div class="btn-box"> removed.
- has altered
margins, padding, text-align, and font-size that are ascetically better IMO.
- has the property
type='button' removed. See <button> in a <form> section below.
In addition Demo B uses the following to display an asterisk:
- A
<label> instead of a <span> for semantics's sake.
In addition Demo C uses the following to display an asterisk:
- The CSS property
::after is assigned to the <fieldset> element instead of actually using an extra element like a <label> or <span> used in the previous demos.
Note: In all demos a special character was used for the actual asterisk called "combining asterisk above". This character appears at the top of the line much like a super-scripted character.
Also Note: The font-sizes are absolute values (px) which I would not normally use but the OP's demo is not responsive.
<button> in a <form>
A <button> within a <form> has inherit behavior when the user clicks it, the <form> will validate according to whatever applicable instructions are set within the HTML or JavaScript then if everything is proper it submits the data. If a <button> has type="button", that <button> doesn't do anything without JavaScript which means the HTML property required is limited to validating user input by showing a message when <input> is hovered on.
In Demo B and Demo C the <button> does not have type="button". Enter something that is not an email address and compare the behavior to Demo A. When a valid e-mail address is entered in Demo B or Demo C, the entered data disappears which means it was submitted (of course it doesn't have any JavaScript so it just submits to nowhere).
Demo A
* {
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: 90%;
padding: 10px 5px;
margin: 10px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
.asterisk {
font-size: 3ch;
color: red;
}
::placeholder {
color: #777;
}
.btn-box {
width: 100%;
margin: 30px auto 30px auto;
text-align: center;
}
<div class="container">
<form class="form1">
<h2>Let's Start Building!</h2>
<input type="email" placeholder="E-mail" required>
<span class='asterisk'>⃰</span>
<div class="btn-box">
<button class="BN" type="button">Next</button>
</div>
</form>
</div>
Demo B
* {
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;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}
fieldset {
width: 100%;
border: 0;
}
.asterisk {
font-size: 3ch;
color: red;
cursor: help;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}
::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>
<label class='asterisk' title=' E-mail is required '>*</label>
</fieldset>
<button class="next">Next</button>
</form>
</section>
Demo C
* {
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;
padding: 90px 0;
margin: 8% auto;
background: #fff;
border-radius: 15px;
}
form {
width: 280px;
margin: 0 auto;
text-align: center;
}
form * {
font-size: 18px;
}
fieldset {
width: 100%;
border: 0;
}
.required::after {
content: '*';
font-size: 22px;
color: red;
}
legend {
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px auto;
color: #333;
}
input {
width: 90%;
padding: 10px 5px;
border: 0;
border-bottom: 1px solid #999;
outline: none;
text-align: center;
}
::placeholder {
text-align: center;
opacity: 0.3;
}
.next {
margin-top: 30px;
padding: 3px 15px;
border-radius: 6px;
cursor: pointer;
}
<section class="container">
<form>
<fieldset class='required'>
<legend>Let's Start Building!</legend>
<input type="email" placeholder="E-mail" required>
</fieldset>
<button class="next">Next</button>
</form>
</section>
