中间的 CSS 边框底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11239747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS border-bottom in the middle
提问by Curious Programmer
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
谢谢
回答by slash197
You can do that with two elements easily, here's a demo http://jsfiddle.net/slash197/JbFrN/6/
您可以使用两个元素轻松做到这一点，这是一个演示http://jsfiddle.net/slash197/JbFrN/6/
回答by Jon
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.
不直接。但是，如果为了边框而插入其他元素是可以的，那么您可以使这些元素的宽度小于“正确”列表项的宽度，以达到所需的效果。
回答by xavier bs
Old post, but I was wondering how to do this effect on a day of 2017
I did it with pseudo element ::afterand display: inherit
旧帖子，但我想知道如何在 2017 年的某一天实现这种效果，
我使用伪元素::after和display: inherit
li::after {
content: '';
display: inherit;
width: 50%;
margin: 10px auto;
border-top: 1px solid #DFDFDF;
}
回答by Satinder singh
<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;
}
回答by gurks0r
I know it's an old question but I found this thread using google.
我知道这是一个老问题，但我使用谷歌找到了这个线程。
It can also be accomplished with :after
也可以通过 :after 完成
div:after {
content: '.';
display: block;
height: 1px;
width: 200px;
margin: 0px auto;
text-indent: -9999px;
border-top: 1px solid #585858;
}
回答by cephei_vv
<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;
}
}
}
