테두리 길이가 div 너비보다 작습니까?

테두리 길이가 div 너비보다 작습니까?

다음 코드가 있습니다.

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

<div></div>

div 폭이 200px라서 border-bottom도 200px인데 border-bottom은 div 폭을 변경하지 않고 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;

(현대 브라우저에서) 이를 위한 또 다른 방법은 음의 확산 상자 그림자를 사용하는 것입니다.이 업데이트된 fiddle: http://jsfiddle.net/WuZat/290/ 을 확인해보세요.

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

하지만 가장 안전하고 양립할 수 있는 방법은 위에서 인정된 답변이라고 생각합니다.그냥 다른 기술을 공유할까 생각했습니다.

이렇게 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 {
    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>

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

해결책은 원하는 1픽셀의 테두리와 높이가 1픽셀에 불과한 중앙 또는 절대 위치의 아래에 다른 디브를 추가하는 것입니다.

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

너비를 볼 수 있도록 원래 테두리를 두었습니다. 하나는 너비가 100이고 다른 하나는 너비가 중앙에 있는 두 가지 예가 있습니다.사용하지 않으려는 것을 삭제합니다.

파티에 늦었지만 (내 경우 아래와 오른쪽에) 두 개의 테두리를 만들고 싶은 사람은 수락된 답변에서 기법을 사용하고 두 번째 줄에 대한 suedo-limit 후에 다음과 같이 속성을 변경할 수 있습니다. 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;
}

저는 제 프로젝트에서 이런 일을 했습니다.여기서 공유하고 싶습니다.어린 시절에 다른 디브를 추가하여 작은 너비의 테두리를 부여하고 일반적인 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;
  }

이렇게 하면 다음과 같은 효과가 있습니다.

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

<hr width="50%">

이렇게 하면 너비가 50%인 수평선이 생성됩니다. 스타일을 편집하려면 클래스를 만들거나 수정해야 합니다.

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

테두리에는 전체 html 요소가 주어집니다.아래쪽 테두리를 반으로 줄이려면 스판과 같은 식별 가능한 다른 블록으로 감쌀 수 있습니다.

HTML 코드:

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

다음과 같은 CSS:

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

저는 이것과 반대의 결과를 얻었을 뿐입니다.:after그리고.::after왜냐하면 난 내 아랫부분의 테두리를 정확히 만들어야 했기 때문입니다.1.3rem더 넓은 범위:

제가 사용했을 때 제 요소가 심하게 변형되었습니다.:before그리고.:after으로 정렬되어 있기 때문에이어기에로에기tedisplay: 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 를 의 으로 합니다 으로 합니다 의 를 에

유사 요소가 있는 상위 div보다 작은 테두리 오른쪽 길이

@import url(https://fonts.googleapis.com/css?family=Raleway);

body{
 font-family: 'Raleway', sans-serif;
}

 
div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background-color: #f5f5f5;
  margin: 20px auto;
  padding: 20px;
  color:#726E97;
}

div:before {
  content : "";
  position: absolute;
  right    : 0;
  top     : 25%;
  height  : 50px;
  width   : 50%;
  border-right:5px solid #726E97;
}

<div>BOX 1</div>

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