text decoration and inheritence

by audetwebdesign

HTML

<table>
    <tr>
        <td class="u">After <em class="no-u">My Text</em> is an <span>inline-block of text that is not affected.</span> You can also add a second decoraton to <b>an inline child</b>.</td>
    </tr>
</table>

CSS

.u {
    text-decoration: underline;
    padding: 20px 0;
    border: 1px dotted blue;
}
.no-u {
    text-decoration: underline;
    display: inline;
}
.u span {
    text-decoration: none;
    display: inline-block;
}
.u b {
    text-decoration: overline;
}