See these two JSFiddles:
http://jsfiddle.net/86gc1w6f/
http://jsfiddle.net/gwbp2vpL/1/
Or try these snippets:
CSS:
* {
box-sizing: content-box;
}
p {
position: relative;
width: 200px;
border: 10px solid rgba(255, 0, 0, 0.5);
}
p::after {
position: absolute;
right: -100px;
top: -10px;
width: 100px;
height: 30px;
border: 10px solid rgba(0, 0, 255, 0.5);
content: '';
}
HTML:
A paragraph
Changing the box-sizing between content-box and border-box only alters the size of the paragraph, not it's ::after element. As others have noted, this is because they are, as named, pseudo elements and must be targeted separately.
It would appear that * does not target psuedo-elements (which as @Harry points out, is as per the CSS specification)
