Typography step 48

Hello. Can anyone help to explain this further?

I’m having trouble understanding why adding the pseudo-element here allows for the border lines to fully extend the width of the label? I realize I’m selecting all p elements that do not contain the no-divider class, however why does this work? Would love a breakdown.

Hi, if you look carefully it is not altering the entire labels width, but actually only affects the “% Daily value” elements bottom border. First you create a selector that targets all .daily-value p , BUT we don’t want a bottom border visible in classes “no-divider” , SO we specifically exclude them from this CSS by making the pseudo-selector.

That does not mean it makes a full width bottom border, but rather excludes it from being granted a short grey bottom border under “% Daily value” paragraph within and around Div elements who do have borders. So it appears like the psuedo selector is altering the width of the border of the daily value, but it is making a grey border a) invisible and b) thus making it closer to the div border that it is nested in.

1 Like

Thank you, very detailed!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.