How do I get this CSS text-decoration override to work?

Question

Some days I swear I\'m going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn\'t seem to be working. What am I missing?

Answer 1

You get rid of text-decoration applied to a parent element in those cases:

• Out-of-flow elements, such as floated and absolutely positioned ones

  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  ul { overflow: hidden; } /* Clearfix */
  

  ul {
    overflow: hidden; /* Clearfix */
  }
  li {
    float: left; /* Avoid text-decoration propagation from ul */
    clear: both; /* One li per line */
  }
  li.u {
    text-decoration: underline;
  }

  
    
  Should not be underlined
    
  Should be underlined
      
  
        
  Should not be underlined
        
  Should be underlined
      
    
  

• Atomic inline-level elements, such as inline blocks and inline tables

  But if you use li{display:inline-block}, then you don't have bullets (you lose display:list-item) and the items appear one next to the others.

  Then, to have one item per line, you can use

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  

  And to add the bullets, you can use ::before pseudo-elements. However, bullets shouldn't be underlined, so you will need to take them out-of-flow or make them atomic inline-level too.

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '• ';         /* Insert bullet */
    display: inline-block; /* Avoid text-decoration propagation from li */
    white-space: pre-wrap; /* Don't collapse the whitespace */
  }
  li.u {
    text-decoration: underline;
  }

  
    
  Should not be underlined
    
  Should be underlined
      
  
        
  Should not be underlined
        
  Should be underlined
      
    
  

  li {
    display: inline-block; /* Avoid text-decoration propagation from ul */
    width: 100%;           /* One li per line */
  }
  li:before {
    content: '•';          /* Insert bullet */
    position: absolute;    /* Avoid text-decoration propagation from li */
    margin-left: -.75em;
  }
  li.u {
    text-decoration: underline;
  }

  
    
  Should not be underlined
    
  Should be underlined
      
  
        
  Should not be underlined
        
  Should be underlined
      
    
  

---

This behavior is specified in CSS 2.1 and CSS Text Decoration Module Level 3:

Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.