use span to create a separator

Question

I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.

Answer 1

You must give it a size, and display it as a block. Try this.

span.separator {
    border-top: 1px solid #333;
    width: 100%;
    height: 1px;
    display: block;
}

JSFiddle

Answer 2

hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.

hr {
   border: 0;
   border-top: 1px solid #000;
   margin: 10px auto; /* For vertical spacing */
}

Demo

I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.

---

Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.

span.separator {
   border-top: 1px solid #000;
   display: block;
   margin: 10px auto; /* For vertical spacing */
}

For more information on inline span you can refer my answer here.

Answer 3

A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block. If you want the border to be only on one side you can use border-right or border-left;

test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test

Here is an example http://jsfiddle.net/Cm5fK/