一侧带有扩展边框的盒子

Question

我已经在这个问题上坐了几天了，一直在搜索十几个StackOverflow答案，但无济于事。

我想实现一个动态框，如图中的那个。

我目前的所有尝试都没有成功，我让它的所有4个面都扩展了，或者只使用了固定的盒子大小（如果盒子大小改变了，所有的东西都会破裂），但这不是我要尝试的在这里实现。 任何帮助将不胜感激！

编辑： 我尝试修改此StackOverflow post的答案，但无法使其仅扩展一行，如图像中所示。

“动态”一词可能是错误的选择，我只是想让它具有响应能力，而不会破坏扩展的边界线。

Answer 1

这样对您有用吗？

JSFiddle DEMO

.box {
    width: auto;
    max-width: 200px;
    height: auto;
    background: white;
    border: 10px solid blue;
    position: relative;
    margin-top: 40px;
}

/* Adding the extended line */
.box:before {
    content: "";
    display: block;
    position: absolute;
    right: -10px;
    top: -40px;
    height: 40px;
    width: 10px;
    background: blue;
}

/* Dynamic height for test purposes */
.box:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="box"></div>