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

div 자체와 다른 크기의 테두리를 가질 수 없습니다.

해결책은 원하는 1 픽셀 테두리와 높이가 1 픽셀 인 neath, centered 또는 absolute 위치 아래에 다른 div를 추가하는 것입니다.

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

너비를 볼 수 있도록 원래 테두리를 그대로 두었고 하나는 너비가 100이고 다른 하나는 너비가 중앙에 있습니다. 사용하지 않을 것을 삭제하십시오.

파티에 늦었지만 2 개의 테두리 (제 경우 하단과 오른쪽에)를 만들고 싶은 사람은 수락 된 답변에 기술을 사용하고 두 번째 줄에 : after 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;
}

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: 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을 곱하고 일부 정상 값으로 변수를 변경합니다.