如何使边界底部在边界左下方？

Question

我有一个xenforo论坛正在运行，我想知道边境属性。

这是Xenforo的Quote块的视觉效果：

我添加了一个border属性，这些是css：

.XenBase .messageContent .bbCodeQuote .attribution {
    background-color: #fbfbfb;
    border-left: 3px solid #9f0000;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom: 1px solid #gray;
    color: #727272;
}

.XenBase .messageContent .bbCodeQuote .quoteContainer {
    background-color: #f2f2f2;
    border-left: 3px solid #9f0000;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-radius: 0px;
}

我想要发生的是边框底部1px灰色位于边框左侧3px红色下面。我怎样才能做到这一点？

Answer 1

据我所知，你需要这样的东西：

.XenBase .messageContent .bbCodeQuote  {
    border-left: 3px solid #9f0000;
}

.XenBase .messageContent .bbCodeQuote .attribution {
    background-color: #fbfbfb;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom: 1px solid #gray;
    color: #727272;
}

.XenBase .messageContent .bbCodeQuote .quoteContainer {
    background-color: #f2f2f2;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-radius: 0px;
}

父div有红色边框。

Answer 2

您可以使用CSS伪类。

例如：

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dignissimos cupiditate dolorum pariatur, assumenda laudantium et ea tenetur corrupti cum at culpa, amet accusamus ducimus eum deserunt magnam deleniti numquam.
</div>

.box {position: relative; border-left: 2px solid red; padding: 10px;}
.box:after {content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background-color: gray;}

https://jsfiddle.net/pooria_h/gtgfwvx2/