如何使用 CSS 建立小於 Div 寬度的邊框？

邊框小於 Div 寬度：使用偽元素的解決方案

在 HTML 和 CSS 中，div 元素的尺寸可以使用寬度屬性。可以使用 border 屬性來設定邊框大小。但是，如果您想要設定小於 div 寬度的邊框，直接的方法是不夠的。

一個解決方案是使用 CSS 偽元素。 :before 偽元素可以加入到 div 中並進行絕對定位。這允許創建一個從 div 底部延伸的元素，並且寬度僅根據需要而定。

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

這種方法有效地在div 底部建立了一個邊框，其寬度僅與:before 偽元素的width 屬性中指定的寬度相同。

以上是如何使用 CSS 建立小於 Div 寬度的邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！