Panjang batas lebih kecil dari lebar div?

Saya memiliki kode berikut

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

DEMO

Lebar div 200px jadi border-bottom juga 200px tapi apa yang harus saya lakukan jika saya ingin border-bottom hanya 100px tanpa mengubah lebar div?

Anda dapat menggunakan elemen semu. Misalnya

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>

Tidak perlu menggunakan markup ekstra untuk tujuan presentasi. : setelah juga didukung dari IE8.

edit:

jika Anda membutuhkan batas rata kanan, ubah saja left: 0denganright: 0

jika Anda membutuhkan batas tengah rata, cukup setel left: 50px;

Cara lain untuk melakukan ini (di peramban modern) adalah dengan bayangan kotak sebaran negatif. Lihat biola yang diperbarui ini: http://jsfiddle.net/WuZat/290/

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

Saya pikir cara teraman dan paling kompatibel adalah jawaban yang diterima di atas. Hanya berpikir saya akan berbagi teknik lain.

Anda dapat menggunakan gradien linier:

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>

Saya menambahkan baris di bawah tag h3 seperti ini

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

Anda tidak boleh memiliki batas ukuran yang berbeda dari div itu sendiri.

solusinya adalah menambahkan div lain di bawah rapi, diposisikan di tengah atau absolut, dengan batas 1 piksel yang diinginkan dan tinggi hanya 1 piksel.

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

Saya meninggalkan batas aslinya sehingga Anda dapat melihat lebarnya, dan memiliki dua contoh - satu dengan lebar 100, dan yang lainnya dengan 100 lebar di tengah. Hapus yang tidak ingin Anda gunakan.

Terlambat ke pesta tetapi untuk siapa saja yang ingin membuat 2 perbatasan (di bawah dan kanan dalam kasus saya) Anda dapat menggunakan teknik dalam jawaban yang diterima dan menambahkan: setelah elemen psuedo untuk baris kedua maka ubah saja properti seperti jadi: 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;
}

Saya memiliki kasus untuk memiliki beberapa batas bawah antara gambar dalam wadah div dan kode baris terbaik adalah - 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;
}

Saya melakukan sesuatu seperti ini dalam proyek saya. Saya ingin membagikannya di sini. Anda dapat menambahkan div lain sebagai anak dan memberinya batas dengan lebar kecil dan menempatkannya di kiri, tengah atau kanan dengan CSS biasa

Kode HTML:

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

CSS seperti di bawah ini:

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

Perbatasan diberi seluruh elemen html. Jika Anda menginginkan setengah batas bawah, Anda dapat membungkusnya dengan beberapa blok yang dapat diidentifikasi lainnya seperti span.

Kode HTML:

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

CSS seperti di bawah ini:

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

Ini akan membantu:

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

<hr width="50%">

Ini menciptakan garis horizontal dengan lebar 50%, Anda perlu membuat / memodifikasi kelas jika Anda ingin mengedit gayanya.

Saya baru saja mencapai kebalikan dari penggunaan ini :afterdan ::afterkarena saya perlu membuat batas bawah saya dengan tepat1.3rem lebih lebar:

Elemen saya menjadi sangat berubah bentuk ketika saya menggunakan :beforedan :afterpada saat yang sama karena elemen-elemen tersebut sejajar secara horizontal dengan display: flex, flex-direction: rowdan align-items: center.

Anda dapat menggunakan ini untuk membuat sesuatu yang lebih luas atau lebih sempit, atau mungkin mod dimensi matematis apa pun:

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

Maaf, ini SCSShanya mengalikan angka dengan 10 dan mengubah variabel dengan beberapa nilai normal.