边长小于div宽度？

Question

我有以下代码

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

DEMO

div宽度为200px,因此border-bottom也是200px但是如果我想边框底部只有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>

不需要使用额外的标记用于表示目的.:IE8也支持以后.

编辑:

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

如果你需要一个中心对齐的边框,只需设置 left: 50px;

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

我像这样在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;
}