html - 获取 :after element to show after container 的问题

Question

我将输入包装在容器 .input-wrap 中。输入本身是无边界的，我试图用 :after 元素获得下划线类型的效果，但是 :after 元素没有显示。

有没有人看到我做错了什么？

.input-wrap {
	width: 80%;
	margin: 0 auto;
	display: block;
}
.input-wrap:after {
	margin-top: 5px;
	height: 2px;
	background-color: purple;
	width: 100%;
	display: block;
}
.contact_input {
	margin: 30px 0 5px 0;
	padding: 15px 10px;
	border: none;
	outline: none;
	width: 100%;
}

<div class="input-wrap">
  <input type="text" class="contact_input" placeholder="Name">
</div>
<div class="input-wrap">
  <input type="email" class="contact_input" placeholder="Email">
</div>

Answer 1

如 Michael Coker 所述, content: ''; 属性是伪元素渲染所必需的。

.input-wrap {
  width: 80%;
  margin: 0 auto;
  display: block;
}
.input-wrap:after {
  content: '';
	margin-top: 5px;
	height: 2px;
	background-color: purple;
	width: 100%;
	display: block;
}
.contact_input {
  margin: 30px 0 5px 0;
  padding: 15px 10px;
  border: none;
  outline: none;
  width: 100%;
}

<div class="input-wrap">
  <input type="text" class="contact_input" placeholder="Name">
</div>
<div class="input-wrap">
  <input type="email" class="contact_input" placeholder="Email">
</div>

感谢amn ，您还可以通过简单地给包装器一个底部边框来节省额外的伪造

.input-wrap {
  width: 80%;
  margin: 0 auto;
  display: block;
  border-bottom: 2px solid purple;
}
.contact_input {
  margin: 30px 0 5px 0;
  padding: 15px 10px;
  border: none;
  outline: none;
  width: 100%;
}

<div class="input-wrap">
  <input type="text" class="contact_input" placeholder="Name">
</div>
<div class="input-wrap">
  <input type="email" class="contact_input" placeholder="Email">
</div>