Wie kann ich mit CSS einen Rahmen erstellen, der kleiner als die Breite meines Divs ist?

Rahmen kleiner als Div-Breite: Eine Lösung mit Pseudoelementen

In HTML und CSS können die Abmessungen eines div-Elements mithilfe von festgelegt werden width-Eigenschaft. Die Rahmengröße kann über die Eigenschaft border festgelegt werden. Wenn Sie jedoch einen Rahmen festlegen möchten, der kleiner als die Breite des Div ist, reicht ein direkter Ansatz nicht aus.

Eine Lösung besteht darin, CSS-Pseudoelemente zu verwenden. Das :before-Pseudoelement kann dem div hinzugefügt und absolut positioniert werden. Dies ermöglicht die Erstellung eines Elements, das sich vom unteren Rand des Divs erstreckt und nur so breit ist wie gewünscht.

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

Dieser Ansatz erzeugt effektiv einen Rand am unteren Rand des Div, der nur so breit ist, wie in der width-Eigenschaft des :before-Pseudoelements angegeben.

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