html - 如何绘制垂直线和水平标记

Question

如何使用 CSS 制作垂直线和水平标记(L 形状):

类似于:

Test 
  L  T2
  L  t3

Answer 1

为此你不需要 div，因为你有伪元素!这是我拼凑的一个简单示例，您可以在此处找到工作示例:http://jsbin.com/aladez/2

HTML:

<ul>
    <li>Herp</li>
    <li>Derp</li>
    <li>Derp</li>
 </ul>

CSS:

li {
    list-style: none; 
}

li:before {
    content: "";
    position: relative;
    top: -6px;
    font-size: 4px;
    line-height: 4px;
    padding: 4px 8px 0 0;
    margin: 0 10px 0 0;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}