Create multiple elements with CSS generated content?

css

Solution

Well, we could create only two pseudo-elements for each element.

However, we could fake the effect by multiple `box-shadow` values, as follows:

.box:after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: orange;

    box-shadow: 25px 0 0 0 orange,  /* Or use positive offsets if needed */
               -25px 0 0 0 orange,
                50px 0 0 0 orange,
               -50px 0 0 0 orange;
}

WORKING DEMO.

Update

Unfortunately, it's not possible to set a `box-shadow` offset relative to the width of the containing block. (The best try would be using relative `em`/`rem` units, but the `font-size` itself can not be changed per the width of the container)

Therefore, using `radial-gradient` background is the best option you'd have (as @Michal has suggested).

In order to keep the aspect ratio of the blue box, you could set the `height` to `0` and use a percentage value for `padding-top` which relies on the width of the containing box.

.box {
  background: orange radial-gradient(closest-side, transparent 40%, skyblue 0%);
  background-size: 20% 100%;
  width: 100%;
  height: 0;         /* Make sure that the box has no height */
  padding-top: 20%;  /* Keep 5:1 aspect ratio                */
}

Here is the WORKING DEMO.

Problem

I have a div (blue in the image below). I need to create a number of equally spaced circles within it. Can this be done with CSS generated content? I could create 2 with the :before and :after pseudo classes, but as I need more would a CSS solution requite more html elements? I was hoping to not have to use an image to improve loading times and to optimize the site for different display density devices. UPDATE This is for a responsive design so the width of the blue div will vary. They also need to remain equally spaced.

Original source