How to draw vertical line and horizontal markers

How can I make a vertical line and h开发者_运维知识库orizontal markers (an L shape) using CSS:

something like:

Test 
  L  T2
  L  t3

You don't need a div for this, because you have pseudo-elements! Here's a quick example I threw together, and you can find a working sample here: 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;
}

Create a div with the following css:

width: 20px; //or whatever width you want for the horizontal line
height: 40px; //or whatever height you want for the vertical line
border-bottom: 1px solid black;
border-left: 1px solid black;

and plant it where you want.

Well, you could add a div and set the border as div { border-left: 1px solid; border-bottom: 1px solid; }. Adjust width and height of that div till it fits your needs. You would also want to make sure that you set float: left for the div.

I don't think there is a solution in html which works OOTB.