ความยาวของเส้นขอบเล็กกว่าความกว้าง div?

ฉันมีรหัสต่อไปนี้

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

การสาธิต

ความกว้างของ div คือ 200px ดังนั้น border-bottom จึงเป็น 200px เช่นกัน แต่ฉันจะทำอย่างไรถ้าฉันต้องการ border-bottom เพียง 100px โดยไม่เปลี่ยนความกว้างของ div

คุณสามารถใช้ pseudoelements เช่น

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>

ไม่จำเป็นต้องใช้มาร์กอัปพิเศษเพื่อวัตถุประสงค์ในการนำเสนอ : after ยังรองรับจาก IE8

แก้ไข:

หากคุณต้องการเส้นขอบที่จัดชิดขวาให้เปลี่ยนleft: 0ด้วยright: 0

หากคุณต้องการเส้นขอบที่จัดชิดกึ่งกลางเพียงแค่ตั้งค่า left: 50px;

อีกวิธีหนึ่งในการทำเช่นนี้ (ในเบราว์เซอร์สมัยใหม่) คือการใช้กล่องเงากระจาย ตรวจสอบซอที่อัปเดตนี้: http://jsfiddle.net/WuZat/290/

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

ฉันคิดว่าวิธีที่ปลอดภัยที่สุดและเข้ากันได้มากที่สุดคือคำตอบที่ยอมรับข้างต้น แค่คิดว่าฉันจะแบ่งปันเทคนิคอื่น

คุณสามารถใช้การไล่ระดับสีเชิงเส้น:

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>

ฉันเพิ่มบรรทัดใต้แท็ก 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;
}

คุณไม่สามารถมีเส้นขอบที่มีขนาดแตกต่างจาก div เองได้

วิธีแก้ปัญหาก็คือเพียงเพิ่ม div อื่นภายใต้ตำแหน่งที่อยู่ตรงกลางหรือตำแหน่งที่แน่นอนโดยมีเส้นขอบ 1pixel ที่ต้องการและมีความสูงเพียง 1pixel

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

ฉันทิ้งเส้นขอบเดิมไว้เพื่อให้คุณเห็นความกว้างและมีสองตัวอย่าง - อันหนึ่งมีความกว้าง 100 และอีกอันมีความกว้าง 100 ตรงกลาง ลบรายการที่คุณไม่ต้องการใช้

สายไปงานปาร์ตี้ แต่สำหรับใครก็ตามที่ต้องการสร้างเส้นขอบ 2 เส้น (ด้านล่างและด้านขวาในกรณีของฉัน) คุณสามารถใช้เทคนิคนี้ในคำตอบที่ยอมรับและเพิ่มองค์ประกอบ: หลังจาก psuedo สำหรับบรรทัดที่สองจากนั้นเพียงแค่เปลี่ยนคุณสมบัติเช่น ดังนั้น: 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;
}

ฉันมีกรณีที่ต้องมีเส้นขอบด้านล่างระหว่างรูปภาพในคอนเทนเนอร์ div และรหัสบรรทัดเดียวที่ดีที่สุดคือ - 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;
}

ฉันทำอะไรแบบนี้ในโครงการของฉัน ผมอยากจะแบ่งปันที่นี่ คุณสามารถเพิ่ม 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;
  }

เส้นขอบจะได้รับองค์ประกอบ html ทั้งหมด หากคุณต้องการเส้นขอบครึ่งล่างคุณสามารถปิดทับด้วยบล็อกอื่น ๆ ที่ระบุตัวตนได้เช่นช่วง

รหัส HTML:

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

CSS ดังต่อไปนี้:

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

สิ่งนี้จะช่วย:

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

<hr width="50%">

สิ่งนี้จะสร้างเส้นแนวนอนที่มีความกว้าง 50% คุณจะต้องสร้าง / แก้ไขคลาสหากคุณต้องการแก้ไขสไตล์

ฉันเพิ่งทำสิ่งที่ตรงกันข้ามกับสิ่งนี้โดยใช้:afterและ::afterเพราะฉันต้องการทำให้เส้นขอบด้านล่าง1.3remกว้างขึ้น:

องค์ประกอบของฉันได้พิการสุดเมื่อใช้:beforeและ:afterในเวลาเดียวกันเพราะองค์ประกอบมีความสอดคล้องกับแนวนอนdisplay: flex, และflex-direction: rowalign-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 และเปลี่ยนตัวแปรด้วยค่าปกติบางค่า