To position a decorative underline using a pseudo-element, what must you set on the parent element?

• A. position: relative
• B. position: absolute
• C. display: block
• D. float: left

Answer: (A)

Establishing a containing block for the absolutely positioned decorative element. When you create a pseudo-element like ::after to draw an underline, you typically position it absolutely. To keep it aligned with the element you’re styling, the pseudo-element’s positioning is relative to its parent. Setting the parent to position: relative creates that containing block, so the underline can be anchored with left: 0 and bottom: 0 and stretch across the full width with width: 100%.

If no containing block is defined, the ::after element could position itself relative to the page or another ancestor, making the underline drift out of place. Using position: absolute on the parent would remove the parent from normal flow and isn’t the intended approach for a decorative underline, and display: block or float: left aren’t required to achieve the positioning. A common pattern is: parent { position: relative; } and parent::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: ...; }