在<li>周围创建L形边框

Question

我想创建一个＆＃39; L＆＃39;分享<li> 这有可能吗？我与<div>有类似的事情，但我的情景需要＆＃39; L＆＃39;具有<li>的形状 类似的东西：

Answer 1

使用:before和:after尝试使用，如下面的代码段所示。希望它有所帮助。

li {
  list-style: none;
  margin-bottom: 20px;
  position: relative;
}

li::before {
  background-color: red;
  bottom: -5px;
  content: "";
  height: 20px;
  left: -10px;
  position: absolute;
  width: 2px;
}

li::after {
  background-color: red;
  bottom: -5px;
  content: "";
  height: 2px;
  left: -10px;
  position: absolute;
  width: 20px;
}

<ul>
  <li>Hi</li>
  <li>Hello</li>
  <li>Welcome</li>
</ul>

更新：根据 JaTurna 对答案的评论，我们可以通过更改几行代码来实现。

li {
  list-style: none;
  margin-bottom: 20px;
  position: relative;
}

li::before {
  background-color: red;
  bottom: 0;
  content: "";
  height: 20px;
  left: -20px;
  position: absolute;
  width: 2px;
}

li::after {
  border-bottom: 2px dashed red;
  bottom: 10px;
  content: "";
  left: -20px;
  position: absolute;
  width: 15px;
}

<ul>
  <li>Hi</li>
  <li>Hello</li>
  <li>Welcome</li>
</ul>