How would you create a decorative underline using a pseudo-element?

How would you create a decorative underline using a pseudo-element?

• A. Use ::before with content: '', position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: currentColor; attach to parent with position: relative.
• B. Use text-decoration: underline on the element.
• C. Use border-bottom on the element.
• D. Use ::after with content: '', position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: currentColor; attach to parent with position: relative.

Answer: (D)

The concept being tested is creating a decorative underline with a pseudo-element that doesn’t affect the text layout. You attach a pseudo-element to the element, give it empty content, and absolutely position it at the bottom so it acts like a line drawn inside the element’s box. By setting the parent to position: relative, the pseudo-element’s absolute positioning uses the element as its containing block, keeping the line in the right place regardless of size. The line’s thickness comes from height (2px), its width from width: 100% so it spans the full element, and its color from background: currentColor so it inherits the text color automatically. Placing the decorative line with ::after is a reliable choice because it sits after the element’s content in the DOM, making layering predictable and avoiding interference with the text itself. In contrast, text-decoration would apply the underline semantically to the text and offers less control, while border-bottom would affect the element’s box and layout, making it harder to customize independently.

The concept being tested is creating a decorative underline with a pseudo-element that doesn’t affect the text layout. You attach a pseudo-element to the element, give it empty content, and absolutely position it at the bottom so it acts like a line drawn inside the element’s box. By setting the parent to position: relative, the pseudo-element’s absolute positioning uses the element as its containing block, keeping the line in the right place regardless of size. The line’s thickness comes from height (2px), its width from width: 100% so it spans the full element, and its color from background: currentColor so it inherits the text color automatically. Placing the decorative line with ::after is a reliable choice because it sits after the element’s content in the DOM, making layering predictable and avoiding interference with the text itself. In contrast, text-decoration would apply the underline semantically to the text and offers less control, while border-bottom would affect the element’s box and layout, making it harder to customize independently.