CSS学伪元素after,before

提要：这个内容有更简单的方法，border-radius:高度的一半 就可以解决，我们这次主要以学习伪元素after,before为主，利用它们去尝试。

不多说直接上图：

对！就这么简单的一个小样式

这是最终的一个小样式。

第一步：构架一个大致的框框

一个大致的框框

额，这里的before打错了，我后面进行了修改。

第二步：画两个圆

第三步：初步的准备工作OK了，需要的都有了，那么就是调整位置了。

为了好看，我一起进行了整体的大小调整，改变了些大小。

需要注意的是圆的大小要与元素的高度一致，left和right的移动根据自己判断，一般是 - 半径。其次，因为宽度增加了一个圆的直径，所以最终宽度需要减去圆的直径。

最终图

整个代码：

.frm{

  width:40px;

  height:50px;

  background-color:red;

  margin:auto;

  position:relative;

}

.frm-cnt{

  color:white;

  font-size:25px;

  white-space: nowrap;

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%)

}

.frm::before{

  content:'';

  width:50px;

  height:50px;

  border-radius:50%;

  background-color:red;

  position:absolute;

  left:-25px;

  z-index: -1;

}

.frm::after{

  content:'';

  width:50px;

  height:50px;

  border-radius:50%;

  background-color:red;

  position:absolute;

  right:-25px;

  z-index: -1;

}