边框长度小于div宽度？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有以下代码

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: 50px;

以上是 边框长度小于div宽度？ 的全部内容， 来源链接： utcz.com/qa/401903.html

回到顶部