Drawing a line with a connector for text using CSS

Question

Is it possible to draw this line only with CSS?

         This line
 __________|_____________
|                        |
|                        |

or

|                        |
|                        |
└────────────────────────
            |
         This line

It's awful to draw using plain text, but ideally I want it to be like this:

Or like that

It can be dynamic, depending on the size of the div that points to.

Just to understand my question:

If it is possible to make the same line as the example above using simple CSS or do I need to use an image and then scale them accordingly?

An example of the final result that I want:

Answer 1

Yes, you can do this using simple borders for positioned pseudo elements:

<p class="bracket">No account needed</p>

.bracket {
    position: relative;
    padding-top: 20px;
    text-align: center;
}

.bracket:before, .bracket:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 15px;
    border: 1px dotted gray;
}

.bracket:before {
    bottom: 100%;
    border-width: 0 1px 1px 1px;
}

.bracket:after {
    top: 0;
    left: 50%;
    width: 0;
    border-width: 0 1px 0 0;
}

Demo: http://jsfiddle.net/feeela/BVLx2/3/

Answer 2

, - , . .

:

Content before.
<div class="rectangle">
    <div class="top line"></div>
    Content inside.
    <div class="bottom line"></div>
</div>
Content after.

.top.line .bottom.line , . , HTML- .

. 20px. , div, .rectangle.

.rectangle {
    margin: 20px 0;
    border: 1px dotted black;
}

.line , . , .line. , 50%, , , 80% ..

.line {
    border-right: 1px dotted black;
    width: 50%;
    height: 20px;
}

, div, . border-width padding .rectangle. .rectangle , a border-width 1, 1 20 -21px.

.top.line { margin-top: -21px; }
.bottom.line { margin-bottom: -21px; }

.: , .top.line .bottom.line padding-top + border-top-width.

: http://jsfiddle.net/QJNHL/

P.S.: , "set-like", . http://jsfiddle.net/34yHs/

Answer 3

Here's another version that uses rounded corners: http://jsfiddle.net/jwuB3/1/ .

HTML:

<div class = "bracket">No Account Needed</div>

CSS

.bracket {
    margin-top: 50px;
    position: relative;
    width: 301px;
    text-align: center;
    font: 10px/1 Sans-Serif;
}

.bracket:before {
    content: "";
    position: absolute;
    left: 0;
    top: -22px;
    width: 100%;
    height: 10px;
    border: 1px dotted #aaa;
    border-top-width: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.bracket:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    height: 10px;
    border-left: 1px dotted #aaa;
}