object :: before不适用于jQuery ui对话框

Question

我在使用带有伪对象的jQuery ui对话框时遇到了问题。

由于某种原因，伪对象::之前不能在span对话框内工作 - 帮助将是欣赏

这是用于理解jQuery激活的对话框和按钮代码，像魔术一样工作

$(document).ready(function () {   
           $("#push").click(function () {
                dialogDesignCal.dialog("open");
            })

            dialogDesignCal = $("#dialog-form-DesignCal").dialog({
                autoOpen: false,
                width: 530,
                show: {
                    effect: "blind",
                    duration: 500
                },
                hide: {
                    effect: "blind",
                    duration: 250
                },
                dialogClass: "no-close",
                modal: true,
                buttons: {
                    "הוספת תחשיב תכנון": function (e) {
                        e.preventDefault();
                    },
                    "בטל": function () {
                        $(".mandatory").each(function () {



                        })
                        dialogAddSuppliers.dialog("close");

                    }
                },
                open: function (event, ui) {
                    $('.ui-widget-overlay').bind('click', function () {
                        dialogAddSuppliers.dialog("close");
                    });
                }
            }
           );

})

有问题的css

.innerformstyle h4 {font-weight:bold;margin:0 0 10px 0;}
#tabs .innerformstyle label, .innerformstyle label {display:block;width:100%;margin:0 0 10px 0;    clear: both;}
#tabs .innerformstyle .title, .innerformstyle .title {display:inline-block;padding:0 6px 0 10px;width:150px;color:#333;border:none;text-align:right;}


#tabs .innerformstyle input[type="text"], .innerformstyle input[type="text"], #tabs .innerformstyle select, .innerformstyle select {width:280px;padding:5px;margin:0;display:inline-block;}
.innerformstyle input[type="radio"], .innerformstyle input[type="checkbox"] {margin:3px 0px 0 5px;float:right;width:15px;}

.innerformstyle input[type="submit"] {margin:10px 0px 0 10px;}
#tabs .innerformstyle .mandatory::before {   
    content: '*';
    width:5px;
    color: red ;
    font-weight: bold ;}

<input type="submit" id="push"/>
<div id="dialog-form-DesignCal" title="הוספת תחשיב תכנון" style="display: none">
        <div id="tabs">
            <ul>
                <li><a href="#tabs1">הגדרת התחשיב</a></li>
            </ul>
<div id="tabs1" class="dialogQ">

                <div class="innerformstyle">
                    <label>
                        <span class='title mandatory'>שם</span>
                        <input type="text" id="nameCalDesgin" />
                    </label>
               </div>
  </div>
  </div>

</div>