如何缩短边框底部的长度？在html/css中
如何缩短边框底部的长度？在html/css中
提问于 2017-10-16 14:08:05
我有一个div容器(bootstrap.min.css )。这个div还有另一个名为divborder的类。边界线很长，我怎么切呢？或者缩短它的长度？样本代码：
.divborder {
border-bottom: 6px solid #C6C4C5;
/*what should i put here to shorten this border-bottom?*/
}<div class="container divborder">
<div class="col-md-6">
some img
</div>
<div class="col-md-6">
some texts
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-16 14:18:57
不能更改边框的实际长度。
你需要使用一个定位的伪元素。
div {
width: 100px;
height: 100px;
background: rebeccapurple;
margin: 1em auto;
position: relative;
}
div::after {
content: "";
position: absolute;
height: 10px;
background: red;
top: 100%;
width: 50%;
left: 50%;
transform: translateX(-50%);
}<div></div>
Stack Overflow用户
发布于 2020-12-10 17:59:12
您可以更改边框底部的长度，这在这篇博客文章中已经描述得很好了。https://www.steckinsights.com/shorten-length-border-bottom-pure-css/
.page-title:after {
content: ""; /* This is necessary for the pseudo element to work. */
display: block; /* This will put the pseudo element on its own line. */
margin: 0 auto; /* This will center the border. */
width: 50%; /* Change this to whatever width you want. */
padding-top: 20px; /* This creates some space between the element and the border. */
border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46772327
复制相关文章
相似问题
腾讯云开发者
