Heim >Web-Frontend >CSS-Tutorial >Kann CSS Teilränder ohne zusätzliche Elemente erstellen?

Kann CSS Teilränder ohne zusätzliche Elemente erstellen?

Susan Sarandon
Susan SarandonOriginal
2024-12-03 08:44:10771Durchsuche

Can CSS Create Partial Borders Without Extra Elements?

Grenzlängenbeschränkungen überwinden

Frage:

Gibt es eine Methode, um die Ausdehnung einzuschränken? einer Grenze? Insbesondere ein

hat einen unteren Rand, aber Sie wünschen sich einen linksbündigen Rand, der nur teilweise nach oben reicht. Ist es machbar, dies zu erreichen, ohne der Seite zusätzliche Elemente hinzuzufügen?

Antwort:

CSS-generierte Inhalte bieten eine Lösung:

div {
  position: relative;
}

/* Main div for border to extend to 50% from bottom left corner */

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

Das obige ist der detaillierte Inhalt vonKann CSS Teilränder ohne zusätzliche Elemente erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn