css - CSSborder-bottom在中间

Question

你好:) 是否可以在中心有底部边框（不使用图片）。列表项之间的分隔符之类的东西不会从边缘到边缘？

谢谢

Answer 1

你可以很容易地用两个元素做到这一点，这里有一个演示http://jsfiddle.net/slash197/JbFrN/6/

Answer 2

不是直接的。但是，如果只是为了边框而插入其他元素是可以的，那么您可以使这些元素的宽度小于您的“正确”列表项以达到预期的效果。

看一个例子。

Answer 3

旧帖子，但我想知道如何在 2017 年的某一天做到这一点，
我用伪元素::after和display: inherit

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

Answer 4

演示

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

Answer 5

我知道这是一个老问题，但我使用谷歌找到了这个线程。

也可以用 :after 来完成

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

Answer 6

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