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

僞元素的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