边框只有div的一半[重复]答案

【问题标题】：border only half the side of a div [duplicate]边框只有div的一半[重复]
【发布时间】：2020-02-14 21:51:29
【问题描述】：

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

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

【问题讨论】：

这能回答你的问题吗？ css border-left 50% height
好吧，它提出了与其他问题相同的方法，但我想我将不得不使用另一个 div，因为似乎没有更好的方法存在。
对于所有拒绝的人，请搜索一段时间以寻求解决方案，不要贬低用户，看看我的知识答案谢谢，
检查所有答案，很多他们不使用任何额外的 div
@TemaniAfif 问题Any way to declare a size/partial border to a box? 不能完全回答这个问题。它回答了如何根据框处理边框高度而不是他的位置的问题。如果你仔细观察，边框必须超过盒子宽度的一半，这部分在“重复”中没有解释。所以重新提出这个问题是有意义的。

【解决方案1】：

如果通过添加第二个 div 你的意思是不要把它写在 html 你可以简单地在你的 div 上使用 ::after 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%);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

我也会这样做。

【解决方案2】：

试试这个，它只是css：

.addBorder {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}

.addBorder:before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  bottom: 0;
  right: 0;
  background-color: #000;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

&lt;div class="addBorder"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

使用伪代码可以达到你想要的结果，请看一下

.wrap{
 height: 100px;
 width: 100px; 
 position: relative;
 background: yellow;
}
.wrap::after {
    content: '';
    height: 50px;
    width: 2px;
    position: absolute;
    right: -1px;
    background: black;
    top: 50%;
    transform: translate(0, -50%);
}

&lt;div class="wrap"&gt;lorem&lt;/div&gt;

【讨论】：

请注意，如果您仔细观察，您会发现您的边框仅在 div 的内部。在图片上你可以看到边框必须内外相等:)
将权限设置为 -1px 会给出该结果