如何在沒有額外 HTML 的情況下控制 CSS 邊框的長度？-css教學-PHP中文網

如何在沒有額外 HTML 的情況下控制 CSS 邊框的長度？

Mary-Kate Olsen

發布： 2024-12-13 19:49:11

原創

331 人瀏覽過

How Can I Control the Length of a CSS Border Without Extra HTML?

使用CSS 自訂邊框長度

當您尋求在不添加額外元素的情況下限制邊框的長度時，讓我們深入研究一下CSS 解決方案可以優雅地實現這一點。

要建立僅向上元素延伸一半的邊框，您可以利用 CSS產生的內容。其實作方式如下：

HTML:

<div>Lorem Ipsum</div>

登入後複製

CSS:

div {
  position: relative;
}

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

登入後複製

CSS:

CSS:
在此片段中在此片段中：
position：相對於父div允許定位絕對是產生的邊框的。
content: "" 建立一個空元素，用作自訂邊框。

背景：黑色指定邊框顏色。

位置： Absolute 使生成的元素可定位。 bottom: 0 和 left: 0 將邊框定位在父元素的左下角div.height: 50% 將邊框限制為父元素高度的一半。此技術產生的邊框僅從左下角向上延伸一半不需要額外的 HTML 元素或同級選擇器。

以上是如何在沒有額外 HTML 的情況下控制 CSS 邊框的長度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！