CSS 產生的內容如何在 Web 版面配置中建立靈活的邊框長度？

靈活的邊框長度控制

設計網頁佈局時，經常會遇到需要控制特定元素邊框長度的情況。雖然您可以透過為頁面添加額外的元素來實現此目的，但還有一個更優雅的解決方案，即使用 CSS 強大的生成內容功能。

考慮以下場景：您有一個

已有底部邊框，並且想要在左側新增一個僅延伸到元素中點的邊框。

CSS 解決方案：

解決此挑戰，CSS 產生的內容來救援。它的運作原理如下：

1. 定位容器：將
   的位置設定為相對位置，為產生的內容建立參考框架。
2. 建立邊框： 在 div:after 偽元素內，使用 content 屬性產生空白區域並為其指定黑色背景顏色。
3. 邊框的位置和大小： 位置設定為絕對以將其放置在容器內。 Bottom 和 left 屬性用於將其放置在左下角。透過將高度設定為 50%，可以將其長度限制為容器高度的一半。寬度設定為 1px 以建立垂直邊框。

透過利用 CSS 產生的內容，您可以新增或修改邊框，而無需建立額外的元素，從而增強佈局的靈活性和程式碼可維護性。