CODEWITHSUNDEEP
css
Curious Programmer
Curious Programmer

Reputation: 127

CSS border-bottom in the middle

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

Upvotes: 6

Views: 38857

Answers (6)

xavier bs
xavier bs

Reputation: 1391

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;
}

Upvotes: 3

cephei_vv
cephei_vv

Reputation: 220

<h1 class="center underlined">
    <span>My title</span>
<h1>

h1 {
    &.center.underlined {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            border-bottom: 3px solid;
        }
    }
}

Upvotes: 0

gurks0r
gurks0r

Reputation: 46

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;
}

Upvotes: 2

Satinder singh
Satinder singh

Reputation: 10198

Demo 

 <div class="dropDown">
        <ul class="ddMenu">
            <li><a href="#">ONe</a></li>
            <li><a href="#">Two</a></li>
            <li class="last"><a href="#">Three</a></li>
        </ul>
    </div>

    .dropDown {
    background-color: #F6F6F2;
    border: 1px solid #D6DAC4;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    margin-top: -1px;
    padding: 10px;
    width: 110px;
}

ul, ol {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
ul.ddMenu li {
    border-bottom: 1px solid #E9EADE;
    box-shadow: 0 1px #FFFFFF;
    display: list-item;
    line-height: 2.3;
}

ul.ddMenu li a {
    display: block;
    padding: 4px 10px;
}

Upvotes: 1

slash197
slash197

Reputation: 9034

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

Upvotes: 13

Jon
Jon

Reputation: 437336

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.

Upvotes: 3

Related Questions