div 너비보다 작은 테두리 길이?

div 너비보다 작은 테두리 길이?

---

다음 코드가 있습니다.

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

데모

div 너비는 200px이므로 border-bottom도 200px이지만 div 너비를 변경하지 않고 border-bottom 만 100px로하려면 어떻게해야합니까?

---

유사 요소를 사용할 수 있습니다. 예

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

---

You cannot have a different sized border than the div itself.

the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.

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

I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.

---

Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so: 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;
}

---

The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.

HTML code:

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

CSS as below:

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

---

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

---

This will help:

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

<hr width="50%">

This creates a horizontal line with a width of 50%, you would need to create/modify the class if you would like to edit the style.

---

I just accomplished the opposite of this using :after and ::after because I needed to make my bottom border exactly 1.3rem wider:

My element got super deformed when I used :before and :after at the same time because the elements are horizontally aligned with display: flex, flex-direction: row and align-items: center.

You could use this for making something wider or narrower, or probably any mathematical dimension mods:

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

Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.

---

I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;

참고URL : https://stackoverflow.com/questions/8572952/border-length-smaller-than-div-width