How to Inspect and Control CSS text-decoration-line in Safari Web Inspector

In modern web interface styling, text decoration plays a fundamental role in visual signposting. Underlines identify hyperlinks, strike-through lines communicate discounted pricing or completed to-do items, and overlines provide stylistic framing in architectural or mathematical presentations. Traditionally, web developers controlled these elements using the monolithic text-decoration shorthand. However, modern CSS separates text decoration into modular sub-properties: text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness.

The text-decoration-line property specifies which decorative lines are drawn on an element. In Apple Safari on macOS and iOS, the WebKit layout engine implements full support for the CSS Text Decoration Module Level 3. Unlike legacy implementations, modern WebKit allows multiple decoration lines to be applied simultaneously (such as applying both an underline and an overline to a single text block). Using Safari Web Inspector, developers can inspect computed decoration lines, audit inherited link styling, test multi-line combinations dynamically, and resolve styling collisions across responsive layouts.

Understanding CSS text-decoration-line Values in WebKit

The text-decoration-line property accepts discrete values or a space-separated combination of directional keywords:

• none: Suppresses all decorative lines. Commonly applied to reset default browser anchor underlines (a { text-decoration-line: none; }).
• underline: Draws a horizontal line beneath the text baseline.
• overline: Draws a horizontal line across the top of the text ascenders.
• line-through: Draws a horizontal line passing directly through the middle of the text glyphs, commonly used for strikethrough pricing and deleted items.
• blink: Legacy keyword defined in older specifications; modern WebKit treats this as a no-op to maintain accessibility standards.
• Multiple Line Combinations: You can declare multiple keywords simultaneously—for example, text-decoration-line: underline overline—to frame an element above and below.

Note that in CSS cascading rules, text-decoration-line is not strictly inherited down the DOM tree in the traditional sense; rather, decorations declared on an ancestor element continue across all descendant child elements and cannot be removed by a child declaring text-decoration-line: none unless the child is an inline block or floating container.

Enabling Safari Web Inspector and Selecting Text Elements

To inspect and debug text decoration lines in Safari on macOS:

1. Launch Safari and navigate to Safari > Settings (or press Cmd + ,).
2. Select the Advanced tab and ensure Show features for web developers is selected.
3. Close the Settings window. The Develop menu will now appear in the macOS menu bar.
4. Right-click the hyperlink, discounted price tag, or text element exhibiting decoration issues and select Inspect Element (or press Cmd + Option + I).

The target DOM node is highlighted in the Elements tree view of Safari Web Inspector.

Inspecting Computed Decoration Rules in the Styles Sidebar

With the target element selected, examine the right-hand panel of Web Inspector.

To audit active text decoration declarations:

1. In the Styles panel, review applied CSS rules. If a CSS reset (like Normalize.css or Tailwind) applies text-decoration: inherit or text-decoration-line: none, verify whether higher-specificity selectors override it.
2. Switch to the Computed tab within the Styles panel.
3. Type text-decoration into the search box. Web Inspector reveals the resolved property values for:
   • text-decoration-line
   • text-decoration-color
   • text-decoration-style
   • text-decoration-thickness
   alongside direct hyperlinks to the originating stylesheet and line number.
4. If an underline appears on a child element that declared text-decoration-line: none, select the parent container in the DOM tree. The underline is likely propagated from the parent <a> or <p> wrapper.

Testing and Simulating text-decoration-line Live in Web Inspector

You can adjust text decoration lines live in Safari to preview design changes without editing source code.

To test property variations live in Web Inspector:

1. In the Styles panel, click inside the CSS declaration block for your target selector (e.g. .sale-price or .editorial-quote).
2. Add a combined underline and overline decoration:

   .editorial-quote {
       text-decoration-line: underline overline;
       text-decoration-color: #0071e3;
       text-decoration-style: solid;
   }

3. Observe the browser viewport immediately. The text is framed above and below by crisp, hardware-rendered lines in Apple’s accent blue.
4. Now test standard strikethrough styling for e-commerce pricing:

   .original-price {
       text-decoration-line: line-through;
       text-decoration-color: #86868b;
       text-decoration-thickness: 1.5px;
   }

5. Observe that the line passes cleanly through the numbers without obscuring surrounding text.

Use the checkboxes adjacent to each rule in Web Inspector to toggle declarations on and off, comparing layout reflow instantaneously.

Resolving Ancestor Underline Inheritance Issues

A frequent styling challenge occurs when an anchor tag contains child spans (such as badges or icons) that you do not want underlined.

Because CSS text decorations propagate across child inline boxes, declaring text-decoration-line: none on an inline <span> does not suppress the parent anchor’s underline. In Safari Web Inspector, you can resolve this by changing the child’s display model:

/* Parent anchor provides link target */
.card-link {
    text-decoration-line: underline;
}

/* Child badge breaks out of ancestor decoration flow */
.card-link .badge {
    display: inline-block;
    text-decoration-line: none;
}

Converting the child element to inline-block establishes an independent formatting context in WebKit, cleanly severing the ancestor’s underline propagation.

Auditing Semantic Accessibility Considerations

When styling text decorations for production websites, consider visual accessibility:

• Hyperlink Affordance: The Web Content Accessibility Guidelines (WCAG) require that links inside body copy be visually distinguishable from surrounding text without relying on colour alone. Removing underlines via text-decoration-line: none can impair usability unless an alternative visual indicator (such as an underline on hover/focus) is provided.
• Semantic HTML: For deleted content or completed tasks, use semantic HTML tags (such as <del> or <s>) rather than applying text-decoration-line: line-through to standard <span> elements, ensuring screen readers announce the strikethrough status to visually impaired users.