边框只有 div 的一半

Question

在上面显示的 html div 中，我只想在 div 的某些右侧设置边框，但是 border-right 为整个边设置了边框。

我已经看到关于这个主题的许多其他问题，但我发现的唯一有效答案需要使用第二个 div，但我想知道这是否可以在没有第二个 div 的情况下完成，即：仅通过编辑此 div 的 css 属性。

Answer 1

如果通过添加第二个 div 你的意思是不写它，html你可以简单地::after在你的 div 上使用css 属性，如下所示：

div {
  width: 100px;
  height: 150px;
  background: black;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  width: 3px;
  right: -3px;
  height: 60%;
  background: red;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div></div>