Home/ Questions/Q 6711841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:11:20+00:00

Given this pared-down test case: <!DOCTYPE html> <html><head><title>No Underline Please</title> <style type=text/css> li {

  • 0

Given this pared-down test case:

<!DOCTYPE html>
<html><head><title>No Underline Please</title>
<style type="text/css">
  li       { text-decoration:underline        }
  li .rule { text-decoration:none ! important }
</style>
</head><body>
  <ol><li><span class="rule">RULE</span> CONTENT</li></ol>
</body></html>

I want to underline CONTENT but not underline RULE. However, Chrome, FF, and IE9 all underline RULE. Presumably this is standards-compliant behavior, given that they all agree.

  1. What spec am I forgetting that is preventing me from overriding the text-decoration?
  2. How can I achieve the result I want?

Fiddle here: http://jsfiddle.net/F3Grr/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The entire li element is being underlined. The li.rule rule is being rendered, but the underline applies to the entire list item.

    You should wrap the content you want to be underlined inside another inline element. Here’s one example: 

    <!DOCTYPE html>
<html><head><title>No Underline! You're welcome.</title>
<style type="text/css">
  li span.emphasis { text-decoration:underline; }
</style>
</head><body>
  <ol><li>RULE <span class="emphasis">CONTENT</span></li></ol>
</body></html>
    • 0