Wie kann ich die Länge eines CSS-Rahmens ohne zusätzlichen HTML-Code steuern?

Rahmenlänge mit CSS anpassen

Da Sie die Länge eines Rahmens begrenzen möchten, ohne zusätzliche Elemente hinzuzufügen, schauen wir uns Folgendes an: CSS-Lösung, die dies elegant erreicht.

Um einen Rahmen zu erstellen, der sich nur teilweise über ein Element erstreckt, können Sie CSS-generierte Inhalte nutzen. So geht's:

HTML:

<div>Lorem Ipsum</div>

CSS:

div {
  position: relative;
}

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

In diesem CSS-Snippet:

• Position: relativ zum übergeordneten Div ermöglicht die Positionierung des generierten Rahmens absolut.
• Inhalt: „“ erstellt ein leeres Element, das als benutzerdefinierter Rahmen fungiert.
• Hintergrund: Schwarz gibt die Rahmenfarbe an.
• Position: absolut erstellt das Generierte Element positionierbar.
• unten: 0 und links: 0 Positionieren Sie den Rahmen an der unteren linken Ecke des übergeordneten Elements div.
• height: 50 % beschränkt den Rand auf die halbe Höhe des übergeordneten Elements.

Diese Technik erzeugt einen Rand, der sich von der unteren linken Ecke nur bis zur Hälfte nach oben erstreckt des div, ohne dass zusätzliche HTML-Elemente oder Geschwisterselektoren erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich die Länge eines CSS-Rahmens ohne zusätzlichen HTML-Code steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!