How do I replicate this effect in CSS?

Question

https://i.sstatic.net/2JMTB.png

The portion to the right of Who with the ----------

Is it a background to the li? I'm really drawing a blank as how to create something like that.

Answer 1

Here you go mess around with this.

http://jsfiddle.net/fjZfL/3/

HTML:

<div id="box">
    <h2>who?</h2>
    <p>I am 22 Year old designer …</p>
</div>

CSS:

#box {
    width: 200px;
    height: 150px;
    background: #eee;
    padding: 0 8px;
}
h2 {
    display: inline-block;
    padding: 18px 4px 0 10px;
    margin: 0;
    background: #eee;
}
p {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 20px 10px;
    margin-top: -10px;
}