关于浮动时元素背景色遮挡的问题及伪元素解决方法

完成一个类似于下划线的需求

完成的效果是这样的

因为是类似下划线，所以我一开始考虑的是text-decoration属性，后来发现这是带圆角而且和字体重叠，所以下划线不太好满足这样的需求

我就把下划线同一个div的背景色来实现，通过绝对定位来确定他的位置

通过父级设置position: relative;

然后子级

.active {
  width: 90px;
  height: 8px;
  position: absolute;
  bottom: 20px;
  left: calc(50% - 50px);
  background-color: blueviolet;
  border-radius: 4px;
}

这样的话，效果图是这样的

这个时候我们 可以用z-index:-99; 来使它进入最底层；

新的问题又出现了  如果我给这个父级加个背景色，那这个紫色线段就会被遮盖，这时候就可以用到伪元素的使用了

父级伪元素

.stockTitle::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -999;
  background-color: aqua;
}

这样的话就可以实现了

完美