我有以下代码
div { width:200px; border-bottom:1px solid magenta; height:50px; }
div宽度为200px,因此border-bottom也是200px,但是如果我希望border-bottom- bottom仅100px而又不更改div宽度,该怎么办?
您可以使用伪元素。例如
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>
无需出于演示目的使用额外的标记。IE8也支持:after。
编辑:
如果你需要一个右对齐边框,只是改变left: 0与right: 0
left: 0
right: 0
如果您需要居中对齐的边框,只需设置 left: 50px;
left: 50px;