边框只有 div 边的一半

Question

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

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

Answer 1

By using pseudo code you can achieve your desire result, please have a look

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

<div class="wrap">lorem</div>

Answer 2

如果通过添加第二个 div 你的意思是不把它写在 html 你可以简单地使用 ::after css 属性在你的 div 像这样：

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>

Answer 3

试试这个，它只是 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);
}

<div class="addBorder"></div>

边框只有 div 边的一半

border only half the side of a div

html

css

border