伪类或伪元素

Question

我有一个

div

元素，其类别为

.parent-div

。它有一个

border-bottom

1px

厚和

608px

宽。 div 本身是

600px

宽。我需要使

border-bottom

的最后 20% 与其余部分的高度不同。我试过使用

::before

和

::after

伪元素，但它们似乎不起作用。有人可以帮我实现这个效果吗？这是

.parent-div

的 CSS：

.parent-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 608px;
  position: relative;
  margin-top: 100px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 18px;
}

<div class="parent-div"></div>

Answer 1

这是问题下方评论中发布的解决方案。

<div class="centered-div">#todo</div> 
<div class="parent-div"> 
  <div class="child-div" id="all">All</div> 
  <div class="child-div">Active</div> 
  <div class="child-div">Completed</div> 
</div> 

<form id="form"> 
  <input type="text" name="detail" placeholder="add details"> 
  <button>Add</button> 
</form> 

<div id="results"></div>

我还删除了

<input>

标签上的结束斜杠，因为没有 HTML 规范要求这样做。