After Content não aparece corretamente em DIV criada com JS

Pessoal, tenho o CSS abaixo que cria um pequeno triângulo ao redor da DIV (fica como um "bico" na DIV).

Esse CSS funciona.

Só não funciona corretamente quando eu crio a DIV com JS (vejam a imagem que ilustra)

.detEventoAgendaModal
{

 background-color:#FFFFFF;
 position:relative; float:left;
 min-height:150px; min-width:300px;
 margin-left:-20px; padding:10px;
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 border:solid 1px #4466A4;
 z-index:10;
}

.detEventoAgendaModal:after{

content: ''; /AQUI QUE OCORRE O PROBLEMA /

position: absolute;
 border: 10px solid transparent;
 border-bottom-color: #4466A4;
 left: -20px;

/ Rotaciona div /
-ms-transform: rotate(270deg); / IE 9 /
-webkit-transform: rotate(270deg); / Chrome, Safari, Opera /

 transform: rotate(270deg);
}

	Trecho  JS que cria a DIV (isso está funcionando)

	 

	var $idTab = 'tabCalendario'
	var $cell = e.target.parentNode.cellIndex ;
	var $row = e.target.parentNode.parentNode.rowIndex;

	//cria DIV wrap
	var $dvDetalhe = document.createElement('div')
	var $addDv = document.getElementById($idTab).rows[$row].cells[$cell].appendChild($dvDetalhe);
	$dvDetalhe.setAttribute('class', 'detEventoAgendaModal')