获取 :after 元素以显示在容器之后的问题

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

如所述，要呈现伪元素需要 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>

多亏了，您还可以通过简单地给包装器一个底部边框来节省额外的伪装

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

获取 :after 元素以显示在容器之后的问题

Issue getting :after element to show after container

html

css

pseudo-element