边框长度小于div宽度？

我有以下代码

div { width:200px; border-bottom:1px solid magenta; height:50px; } 

DEMO

div的宽度是200px，所以border-bottom也是200px，但是如果我只想在border-bottom只有100px而不改变div的宽度，我应该怎么做？

Answer 1

你可以使用伪元素。 例如

 div { width : 200px; height : 50px; position: relative; z-index : 1; background: #eee; } div:before { content : ""; position: absolute; left : 0; bottom : 0; height : 1px; width : 50%; /* or 100px */ border-bottom:1px solid magenta; } 

 <div>Item 1</div> <div>Item 2</div> 

Answer 2

另一种做法是（在现代浏览器中）使用负面的传播框阴影。 看看这个更新的小提琴： http : //jsfiddle.net/WuZat/290/

 box-shadow: 0px 24px 3px -24px magenta; 

不过，我认为最安全和最相容的方式就是上面所接受的答案。 只是想我会分享另一种技术。

Answer 3

您可以使用线性渐变：

 div { width:100px; height:50px; display:block; background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px); background-position: bottom; background-size: 100% 25px; background-repeat: no-repeat; border-bottom: 1px solid #000; border-top: 1px solid red; } 

 <div></div> 

Answer 4

你不能有一个不同的尺寸的边界比div本身。

解决方法是在neath，居中或绝对定位下，只添加另一个div，所需的1像素边框和1pixel的高度。

http://jsfiddle.net/WuZat/3/

我留下了原来的边框，以便您可以看到宽度，并有两个示例 – 一个宽度为100，另一个宽度为100。 删除你不想使用的那个。

Answer 5

我在h3标签下添加了这样的行

 <h3 class="home_title">Your title here</h3> .home_title{ display:block; } .home_title:after { display:block; clear:both; content : ""; position: relative; left : 0; bottom : 0; max-width:250px; height : 1px; width : 50%; /* or 100px */ border-bottom:1px solid #e2000f; margin:0 auto; padding:4px 0px; } 

Answer 6

边框被赋予整个html元素。 如果你想要一半的底部边框，你可以用一些其他可识别的区块如span来包裹它。

HTML代码：

 <div> <span>content here </span></div> 

CSS如下：

  div{ width:200px; height:50px; } span{ width:100px; border-bottom:1px solid magenta; } 

Answer 7

我刚刚完成了相反的使用:after和::after因为我需要使我的底部边界完全1.3rem ：

我的元素在使用时变得超级变形:before和:after ：因为元素与display: flex水平alignmentdisplay: flex ， flex-direction: row和align-items: center 。

你可以用这个来扩大或缩小范围，或者可能是任何math维度的mod：

 a.nav_link-active { color: $e1-red; margin-top: 3.7rem; } a.nav_link-active:visited { color: $e1-red; } a.nav_link-active:after { content: ''; margin-top: 3.3rem; // margin and height should height: 0.4rem; // add up to active link margin background: $e1-red; margin-left: -$nav-spacer-margin; display: block; } a.nav_link-active::after { content: ''; margin-top: 3.3rem; // margin and height should height: 0.4rem; // add up to active link margin background: $e1-red; margin-right: -$nav-spacer-margin; display: block; } 

对不起，这是SCSS ，只需将数字乘以10，然后用一些正常值更改variables。

Answer 8

  div{ font-size: 25px; line-height: 27px; display:inline-block; width:200px; text-align:center; } div::after { background: #f1991b none repeat scroll 0 0; content: ""; display: block; height: 3px; margin-top: 15px; width: 100px; margin:auto; } 

Answer 9

这将有助于：

http://www.w3schools.com/tags/att_hr_width.asp

 <hr width="50%"> 

这将创build一个宽度为50％的水平线，如果您想编辑样式，则需要创build/修改该类。

Answer 10

对于晚会，但对于任何想要制作2个边框的人（在我的情况下，在底部和右边），可以使用接受的答案中的技巧，并在第二行的psuedo-element之后添加：然后改变属性所以： http : //jsfiddle.net/oeaL9fsm/

 div { width:500px; height:500px; position: relative; z-index : 1; } div:before { content : ""; position: absolute; left : 25%; bottom : 0; height : 1px; width : 50%; border-bottom:1px solid magenta; } div:after { content : ""; position: absolute; right : 0; bottom : 25%; height : 50%; width : 1px; border-right:1px solid magenta; }