Chiều dài đường viền nhỏ hơn chiều rộng div?

Tôi có mã sau

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

BẢN GIỚI THIỆU

Chiều rộng div là 200px vì vậy đường viền dưới cùng cũng là 200px nhưng tôi phải làm gì nếu tôi muốn đường viền dưới cùng chỉ 100px mà không thay đổi chiều rộng div?

Bạn có thể sử dụng các thành phần giả. Ví dụ

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>

Không cần sử dụng thêm đánh dấu cho mục đích thuyết trình. : sau cũng được hỗ trợ từ IE8.

biên tập:

nếu bạn cần đường viền căn phải, chỉ cần thay đổi left: 0bằngright: 0

nếu bạn cần đường viền căn giữa chỉ cần đặt left: 50px;

Một cách khác để làm điều này (trong các trình duyệt hiện đại) là với một bóng hộp trải rộng âm. Kiểm tra fiddle cập nhật này: http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta;

Tôi nghĩ rằng cách an toàn nhất và tương thích nhất là câu trả lời được chấp nhận ở trên. Tôi chỉ nghĩ rằng tôi sẽ chia sẻ một kỹ thuật khác.

Bạn có thể sử dụng một gradient tuyến tính:

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>

Tôi đã thêm dòng dưới thẻ h3 như thế này

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

Bạn không thể có đường viền có kích thước khác với chính div.

giải pháp sẽ là chỉ thêm một div khác dưới neath, căn giữa hoặc vị trí tuyệt đối, với đường viền 1pixel mong muốn và chiều cao chỉ 1pixel.

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

Tôi đã để nguyên đường viền ban đầu để bạn có thể xem chiều rộng và có hai ví dụ - một có chiều rộng 100 và ví dụ còn lại với chiều rộng 100 được căn giữa. Xóa một trong những bạn không muốn sử dụng.

Đến muộn nhưng đối với bất kỳ ai muốn tạo 2 đường viền (ở dưới cùng và bên phải trong trường hợp của tôi), bạn có thể sử dụng kỹ thuật trong câu trả lời được chấp nhận và thêm một: sau psuedo-element cho dòng thứ hai, sau đó chỉ cần thay đổi các thuộc tính như vì vậy: 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;
}

Tôi có trường hợp có một số đường viền dưới cùng giữa các hình ảnh trong vùng chứa div và mã một dòng tốt nhất là - border-bottom-style: inset;

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

Tôi đã làm một cái gì đó như thế này trong dự án của tôi. Tôi xin chia sẻ nó ở đây. Bạn có thể thêm một div khác làm con và tạo cho nó một đường viền với chiều rộng nhỏ và đặt nó sang trái, giữa hoặc phải bằng CSS thông thường

Mã HTML:

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

CSS như bên dưới:

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

Đường viền được cung cấp cho toàn bộ phần tử html. Nếu bạn muốn nửa đường viền dưới cùng, bạn có thể bọc nó bằng một số khối có thể nhận dạng khác như span.

Mã HTML:

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

CSS như bên dưới:

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

Điều này sẽ giúp:

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

<hr width="50%">

Điều này tạo ra một đường ngang với chiều rộng là 50%, bạn sẽ cần tạo / sửa đổi lớp nếu bạn muốn chỉnh sửa kiểu.

Tôi vừa hoàn thành điều ngược lại với điều này bằng cách sử dụng :aftervà ::aftervì tôi cần làm cho đường viền dưới của mình 1.3remrộng hơn chính xác :

Yếu tố tôi đã siêu biến dạng khi tôi sử dụng :beforevà :aftercùng một lúc bởi vì các yếu tố được ngang phù hợp với display: flex, flex-direction: rowvà align-items: center.

Bạn có thể sử dụng điều này để tạo ra thứ gì đó rộng hơn hoặc hẹp hơn, hoặc có thể là bất kỳ mod kích thước toán học nào:

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

Xin lỗi, đây là SCSS, chỉ cần nhân các số với 10 và thay đổi các biến với một số giá trị bình thường.