CSS border-bottom in the middle

Question

Hello :) Is it possible to have bottom border in the center (without using pictures). Something like separator between list items which doesn't go from edge to edge?

Thanks

Answer 1

You can do that with two elements easily, here's a demo http://jsfiddle.net/slash197/JbFrN/6/

Answer 2

Not directly. But if it's OK to insert additional elements just for the sake of the border then you can make these elements less wide than your "proper" list items to achieve the desired effect.

See an example.

Answer 3

Old post, but I was wondering how to do this effect on a day of 2017
I did it with pseudo element ::after and display: inherit

li::after {
   content: '';
   display: inherit;
   width: 50%;
   margin: 10px auto;
   border-top: 1px solid #DFDFDF;
}

Answer 4

I know it's an old question but I found this thread using google.

It can also be accomplished with :after

div:after {
  content: '.';
  display: block;
  height: 1px;
  width: 200px;
  margin: 0px auto;
  text-indent: -9999px;
  border-top: 1px solid #585858;
}