僞元素的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; 使之不佔據主體的空間css

jsfiddlespa

相關文章
相關標籤/搜索