ボーダーの長さが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ピクセルのみの別のdivを追加することです。

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

幅を確認できるように元の境界線を残しました。2つの例があります。1つは幅100、もう1つは幅100を中心にしています。使用したくないものを削除してください。

パーティーに遅れますが、2つの境界線（私の場合は下と右）を作成したい人は、受け入れられた回答でテクニックを使用し、2行目に：after擬似要素を追加して、次のようにプロパティを変更するだけですそう：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コンテナー内の画像の間に下の境界線が必要な場合があり、最も優れた1行のコードは -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を掛けて、変数を通常の値に変更するだけです。