how to Prevent parent underline from underlining child element

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • sarfaraj
    New Member
    • Aug 2012
    • 1

    how to Prevent parent underline from underlining child element

    Code:
    <html>
    <head>
    <style type="text/css">
    .redunderline {
        color: red;
        text-decoration: underline;
    }
    .blueoverline {
        color: blue;
        text-decoration:none;
    }
    </style>
    </head>
    <body>
    <div class="redunderline">
        This <b>div</b> has text decoration set to underline,
        <span class="blueoverline">but this <b>span</b> has it set to overline.</span> 
        The <b>div</b> continues here.
    </div>
    </body>
    </html>
    Last edited by Dormilich; Aug 1 '12, 02:29 PM. Reason: Please use [CODE] [/CODE] tags when posting code.
  • ariful alam
    New Member
    • Jan 2011
    • 185

    #2
    Basically its not possible as the <span></span> is inside the <div></div>. because it works like layer. <span></span> layer inside <div></div> layer. whenever you used text-decoration to none for the <span></span> it's go transparent/hide to show the <div></div>'s settings.

    Comment

    • Bharat383
      New Member
      • Aug 2011
      • 93

      #3
      use this code

      div.redunderlin e {}

      span.blueunderl ine{}

      Comment

      Working...