在浮动元素中使用::after问题记录

父元素是浮动元素，在子元素中使用 :after或 ：before遇到的一些问题

css代码

.parent{
          float: left;	//设置父元素浮动
          border: 1px solid grey;
	}
.son{
          border: 1px solid green;
	}
.son:hover::after{ /* 在子元素中添加 border */
            content: '';
            border: 10px solid red;
            }

html代码1

<div class="parent">
      <div class="son">测试文本</div>
</div>

添加的 border 正常显示

html代码2(在‘测试文本’后换行)

<div class="parent">
      <div class="son">测试文本
      </div>
</div>

此时 border 换行显示，并且测试文本后面多了与 border 宽度相同的空白

** ::after 在标签结束处—</标签名>添加内容，如果代码中结束标签换行，后面要加上块元素的空白宽度**