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