Question

我有以下代码

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

DEMO

div宽度为200px，因此border-bottom也是200px但是如果我想在不改变div宽度的情况下只使用border-bottom 100px，该怎么办？

Answer 1

您可以使用伪元素。 E.g。

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;
}

Answer 5

您不能拥有与div本身不同的大小边框。

解决方案是在neath，居中或绝对位置添加另一个div，使用所需的1像素边框，高度仅为1像素。

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

我离开了原始边框，因此您可以看到宽度，并有两个示例 - 一个宽度为100，另一个宽度为100宽度。删除你不想使用的那个。

Answer 6

晚会但是对于想要制作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;
}

Answer 7

我在项目中做了类似的事情。我想在这里分享。您可以将另一个div作为孩子添加，并为其设置一个较小的边框，然后将其与普通CSS一起放置在左侧，中间或右侧

HTML代码：

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

CSS如下：

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }

Answer 8

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

HTML code：

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

CSS如下：

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

Answer 9

            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 10

这会有所帮助：

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

<hr width="50%">

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

Answer 11

我刚刚使用:after和::after完成了相反的操作，因为我需要使我的底部边框更加宽1.3rem：

当我同时使用:before和:after时，我的元素变得极度变形，因为元素与display: flex，flex-direction: row和align-items: center水平对齐

您可以使用它来制作更宽或更窄的东西，或者可能使用任何数学维度模型：

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，然后使用一些正常值更改变量。

Answer 12

我想在div容器中的图片之间留一些底线，最好的一行代码是- border-bottom-style：inset;

边长小于div宽度？

12 个答案: