我可以在CSS中创建伪伪元素吗？

Question

是否可以通过CSS创建具有ID或类名的元素，或者我可以创建嵌套的伪元素（如div：before：before）

这是我的问题。

我创建了这个CSS铃声图标

＆＃13;

＆＃13;

div#actionAlertsBG {
  height: 300px;
  width: 300px;
}
div#actionAlertsBG div:before {
  box-shadow: 0 300px 0 300px darkgray;
}
div#actionAlertsBG div:first-child {
  background-color: darkgray;
}
div#actionAlertsBG div:first-child:before {
  box-shadow: none;
}
div#actionAlertsBG div#tbell {
  border-radius: 50%;
  width: 50%;
  height: 50%;
  margin-top: 7%;
  margin-bottom: -25%;
  margin-left: auto;
  margin-right: auto;
}
div#actionAlertsBG div#rbell {
  width: 50%;
  height: 50%;
  position: relative;
  overflow: hidden;
  float: left;
  margin-bottom: -12%;
}
div#actionAlertsBG div#rbell:before {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 100%;
  height: 180%;
  border-radius: 100%;
}
div#actionAlertsBG div#lbell {
  width: 50%;
  height: 50%;
  position: relative;
  overflow: hidden;
  float: left;
  margin-bottom: -12%;
}
div#actionAlertsBG div#lbell:before {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 50%;
  width: 100%;
  height: 180%;
  border-radius: 100%;
}
div#actionAlertsBG div#bbell {
  width: 30%;
  height: 30%;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}
div#actionAlertsBG div#bbell:before {
  content: '';
  position: absolute;
  height: 50%;
  width: 100%;
}

＆＃13;

<div id="actionAlertsBG">
  <div id="tbell"></div>
  <div id="lbell"></div>
  <div id="rbell"></div>
  <div id="bbell"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

是否有可能以任何方式解决这个问题，结果是相同的，但四个内部DIV（tbell，rbell，lbell和bbell）不必进行硬编码？