小编典典

边框长度小于div宽度?

html

我有以下代码

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

div宽度为200px,因此border-bottom也是200px,但是如果我希望border-bottom-
bottom仅100px而又不更改div宽度,该怎么办?


阅读 407

收藏
2020-05-10

共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>

无需出于演示目的使用额外的标记。IE8也支持:after。

编辑:

如果你需要一个右对齐边框,只是改变left: 0right: 0

如果您需要居中对齐的边框,只需设置 left: 50px;

2020-05-10