Partial width borders

Question

How can I produce borders that don't stretch the whole width of a given box? E.g.:

Do I have to use a separate HTML element with a different width? Or can I achieve this entirely via CSS.

Answer 1

You can always use a CSS :after statement:

<style>
div.hr-like:after {
    height:1px;
    background:#333;
    width:25%;
    display:block;
    margin:0px auto;
    content:""
}
</style>

<div class="hr-like">
    foo
</div>

---

Added: Here's an example at jsfiddle