asterisk wird nicht korrekt neben der Eingabe auf klicken Ereignis

Question

kann mir jemand bitte sagen, warum, wenn ich auf Bearbeiten in diesem Fiddle klicken, Sternchen nicht mit Eingabefeld ausgerichtet ist, aber auf der Unterseite angezeigt wird.
CSS

.required-field::after { 
    display: none; 
    content: "*"; 
    color: red; 
    font-size: 23px; 
    margin-left: 5px; 
} 

JS

$("p").on('click', function(){  
       var $style = $('<style>'); 
       $style.appendTo('head'); 
       var base = ".required-field::after{display:block;}"; 
       $style.html(base); 
       }); 

Dank

Answer 1

Sie haben display:inline zu verwenden anstelle von Block

$("p").on('click', function(){  
 
       var $style = $('<style>'); 
 
       $style.appendTo('head'); 
 
       var base = ".required-field::after{display:inline;}"; 
 
       $style.html(base); 
 
       });

.required-field::after { 
 
    display: none; 
 
    content: "*"; 
 
    color: red; 
 
    font-size: 23px; 
 
    margin-left: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='mvnDefinitionInput required-field'> 
 
<input type='text' class='mvnDefinitionFieldExtraInput'/> 
 
</div> 
 
<p class='editDefMVN"'><span>Edit</span></p>