Randlänge kleiner als div Breite?

Ich habe folgenden Code

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

DEMO

Die Div-Breite beträgt 200 Pixel, also beträgt der Rand unten auch 200 Pixel. Was soll ich tun, wenn ich nur 100 Pixel Rand haben möchte, ohne die Div-Breite zu ändern?

Sie können Pseudoelemente verwenden. Z.B

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>

Es ist nicht erforderlich, zusätzliches Markup für Präsentationszwecke zu verwenden. : after wird auch von IE8 unterstützt.

bearbeiten:

Wenn Sie einen rechtsbündigen Rand benötigen, ändern Sie einfach left: 0mitright: 0

Wenn Sie einen mittig ausgerichteten Rand benötigen, legen Sie ihn einfach fest left: 50px;

Eine andere Möglichkeit, dies zu tun (in modernen Browsern), ist ein negativ verbreiteter Box-Schatten. Schauen Sie sich diese aktualisierte Geige an: http://jsfiddle.net/WuZat/290/

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

Ich denke jedoch, dass der sicherste und kompatibelste Weg die oben akzeptierte Antwort ist. Ich dachte nur, ich würde eine andere Technik teilen.

Sie können einen linearen Farbverlauf verwenden:

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>

Ich habe Zeile unter unter h3 Tag wie folgt hinzugefügt

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

Sie können keinen anderen Rand als das Div selbst haben.

Die Lösung wäre, einfach ein weiteres Div unter der Mitte, zentriert oder absolut positioniert, mit dem gewünschten 1-Pixel-Rand und nur 1 Pixel Höhe hinzuzufügen.

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

Ich habe den ursprünglichen Rand beibehalten, damit Sie die Breite sehen können, und habe zwei Beispiele - eines mit 100 Breite und das andere mit 100 Breite zentriert. Löschen Sie diejenige, die Sie nicht verwenden möchten.

Spät zur Party, aber für alle, die 2 Rahmen erstellen möchten (in meinem Fall unten und rechts), können Sie die Technik in der akzeptierten Antwort verwenden und ein: after pseudo-Element für die zweite Zeile hinzufügen und dann einfach die Eigenschaften wie ändern also: 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;
}

Ich habe einen Fall, um einen unteren Rand zwischen Bildern im div-Container zu haben, und der beste Code für eine Zeile war - 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;
}

Ich habe so etwas in meinem Projekt gemacht. Ich möchte es hier teilen. Sie können als Kind ein weiteres Div hinzufügen und ihm einen Rand mit geringer Breite geben und ihn mit normalem CSS links, mittig oder rechts platzieren

HTML Quelltext:

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

CSS wie folgt:

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }

Der Rand erhält das gesamte HTML-Element. Wenn Sie einen halben unteren Rand möchten, können Sie ihn mit einem anderen identifizierbaren Block wie span umschließen.

HTML Quelltext:

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

CSS wie folgt:

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

Das wird helfen:

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

<hr width="50%">

Dadurch wird eine horizontale Linie mit einer Breite von 50% erstellt. Sie müssen die Klasse erstellen / ändern, wenn Sie den Stil bearbeiten möchten.

Ich habe gerade das Gegenteil davon erreicht :afterund ::afterweil ich meinen unteren Rand genau 1.3rembreiter machen musste:

Mein Element wurde bei der Verwendung super verformt :beforeund :aftergleichzeitig, weil die Elemente horizontal mit und ausgerichtet display: flexsind .flex-direction: rowalign-items: center

Sie können dies verwenden, um etwas breiter oder schmaler zu machen, oder wahrscheinlich um mathematische Dimensionsmods:

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

Entschuldigung, SCSSmultiplizieren Sie einfach die Zahlen mit 10 und ändern Sie die Variablen mit einigen normalen Werten.