0

Is it possible to either create elements with IDs or class names though CSS, or can I create nested pseudo-elements (like div:before:before)

Here is my problem.

I created this CSS bell icon

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%;
}
<div id="actionAlertsBG">
  <div id="tbell"></div>
  <div id="lbell"></div>
  <div id="rbell"></div>
  <div id="bbell"></div>
</div>

Is it possible to fix this in any way so that the result is the same, but the four internal DIVs (tbell, rbell, lbell and bbell) don't have to be hard-coded?

DaniP
  • 37,813
  • 8
  • 65
  • 74
Hypersapien
  • 617
  • 2
  • 8
  • 23
  • Possible duplicate of [Nesting pseudo-elements inside pseudo-elements](http://stackoverflow.com/questions/9007546/nesting-pseudo-elements-inside-pseudo-elements) – kukkuz Oct 05 '16 at 17:06
  • I did leave it open ended, however, asking if there was any possible solution to the problem, not necessarily one that involved pseudoelements. – Hypersapien Oct 05 '16 at 17:26
  • 1
    Possible duplicate of [Can I have multiple :before pseudo-elements for the same element?](http://stackoverflow.com/questions/11998593/can-i-have-multiple-before-pseudo-elements-for-the-same-element) – TylerH Oct 05 '16 at 17:36

0 Answers0