Wie kann ich einen Rahmen erstellen, der kürzer ist als die Breite meines Divs?

Rahmenlänge flacher als Div-Breite

Ihr Code definiert ein div-Element mit einer Breite von 200 Pixeln und einem durchgehenden 1 Pixel großen magentafarbenen Rand am unteren Rand Rand. Sie suchen jedoch nach einer Methode, um die Länge dieses Rahmens auf nur 100 Pixel zu begrenzen, ohne die Breite des Div zu ändern.

Pseudoelemente bieten eine Lösung. Pseudoelemente sind Elemente, die Ihrem DOM-Baum hinzugefügt werden und es Ihnen ermöglichen, Teile eines vorhandenen Elements zu formatieren. In diesem Fall können Sie ein Pseudoelement erstellen, das als Rand fungiert:

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

Dieses Pseudoelement, das sich absolut unten links im Div positioniert, repliziert die gewünschte Randlänge von 100 Pixel. Durch Anpassen der Eigenschaft „Breite“ können Sie die Länge des Rahmens einfach steuern, ohne die Breite des Divs selbst zu beeinflussen.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Rahmen erstellen, der kürzer ist als die Breite meines Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!