问题获取：在容器

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: '';属性。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

感谢amn，您还可以通过简单地为包装器提供底部边框来保存自己的额外伪装

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;