Why :before css not working in Design View with Expression Web?

Question

I have Windows 7 64-bit computer and using Microsoft Expression Web 4.

I created a page in Microsoft Expression Web. In it I use :before CSS to show a red asterisk. But in the Design View of Microsoft Expression Web, the red asterisk never shows up. Only when I save the page and preview it in a web browser then the red asterisk shows up.

This is the CSS:

div.form_control span.label_mandatory
{
       color: Gray;
       float: left;
       font-size: medium;
       font-weight: normal;
    margin-left: 7px;
    line-height: normal;
       overflow: hidden;
       text-align: right;
       white-space: nowrap;
       width: 138px;
}

div.form_control span.field_mandatory:before
{
    color: Red;
    content: '*';
    font-weight: normal;
    margin-left: -7px;
}

div.form_control span.field_mandatory
{
    font-size: medium;
    font-weight: normal !important;
    margin-left: 10px;
    text-align: left;
    width: 50px;
}

This is the HTML:

<table width="100%">
<tr>
  <td>
    <div class="form_control">
      <span class="label_mandatory">English Description</span>
      <span class="field_mandatory">Dental QC (TB)</span>
    </div>
  </td>
</tr>
</table>

So why the Design View cannot show the effect of :before CSS? What I need to do so that the Design View can show it right away?

The page is telling me it is using CSS 2.1.

Thanks