<em> element cannot accepts a new class but does not implement it

<em> element cannot accepts a new class but does not implement it

Hello, I am new to jQuery and my question might sound really beginner-silly, but I could not find any solution to it in the web.
I am trying something very simple following book instructions: assigning an <em> element a new class. It accepts it but does not implement the changes associated with the new class ?? The <em> element inside the first <li> element has class=under according to Firebug, but the text never gets underlined
Am I doing something wrong ??

Here is the
1) HTML
2) jQuery

  1.   <html>
         <head>
             <style>
             li {background-color: #ec8b68;}
             .headline {color: red}
             .hot {background-color: #d7666b; text-shadow: 2px 2px 1px #914141;}
             #page {margin: 20px auto; max-width: 480px;}  
             .under {text-decoration: underline}
             .color1 {color: yellow}
             </style>
         </head>
         <body>
            <div id="page">
                <h1 id="header">List</h1>
                <h2>Buy groceries</h2>
                <ul>
                    <li id="one" class="hot"><em>fresh</em> figs</li>
                    <li id="two" class="hot">pine nuts</li>
                    <li id="three" class="hot">honey</li>
                    <li id="four">balsamic vinegar</li>
                </ul>
            </div>
            <script src="jquery-1.11.2.js"> </script>
            <script type="text/javascript" src="jQuery.js"> </script>
         </body>
     </html>
  2. $('li em').addClass('under');
Chapter 7 - jQuery