偽元素的margin值擠壓主體元素解決

主體是兩個p標簽，需要再其左側添加一個豎線，很常見的需求

目標

前提條件

1. 右側的文字個數不固定

問題

1. 需要讓before元素為`float:left`； 2. 文字個數不固定時，整個元素的寬度是auto，根據文字的內容來算，此時使用 :before偽元素時，如果偽元素占據的寬度過大，會導致文字被擠下去 .demo:before{float: left;height: 67px;content: '';border-right: solid 3px $primary;border-left: solid 2px $primary;margin-right: 10px; }

解決

將 margin-right: 10px; 改為margin-left: -10px; 使之不占據主體的空間

jsfiddle

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的伪元素的margin值挤压主体元素解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。