After-Before pseudo in CSS3 for multiple classes - css

Question

How to assign after & before pseudo classes to multiple CSS-classes
For example:
[class*="divclass-"]::before, ::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}

Answer 1

Consider this HTML structure, where you have a <div> which have children <span> and <p>. And another <span> and <p> as siblings.
<div>
<span>abc</span>
<p>xyz</p>
</div>
<span>123</span>
<p>456</p>
For example, if we need to change the colour of the children, we could write on your way,
div span, p{
color: red;
}
This problem with this is that, it will change the colour of the sibling <p>456</p> too as the style is applied globally to all the paragraph tags.
And the solution is to follow specificity as we did with the <span> and write the selectors as
div span,
div p{
color: red;
}
The same rule applies to pseudo-elements as well. Hence the solution is,
[class*="divclass-"]::before,
[class*="divclass-"]::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
Note 1
If you are working on SASS, your syntax could be,
[class*="divclass-"]{
&::before,
&::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
}
Note 2
The before and after pesudo-elements require the content property.
Hope this helps.

Answer 2

The comma does not mean that the following elements are children of the same selector (here [class*="divclass-"]).
It just allows you to chain the selectors.
#see https://www.thoughtco.com/comma-in-css-selectors-3467052
Here is the solution:
[class*="divclass-"]::before,
[class*="divclass-"]::after {
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
content: '';
}
<div class="divclass-1" style="height: 10px; width: 10px"></div>