CSS: arrow down on tooltip with border

tooltip with arrow down

/* 
check in IE, might need ":" instead of "::" 
HTML: <p class="tooltip">Some text</p>
*/

/* tooltip element with border */
.tooltip { 
position:relative; 
padding:15px; 
margin:1em 0 3em; 
border:5px solid #5a8f00; /* green */
color:#333; 
background:#fff; 
} 
/* triangle green, first, below */
.tooltip::before {
content:""; 
position:absolute; 
bottom:-20px; 
left:40px; 
border-width:20px 20px 0; 
border-style:solid; 
border-color:#5a8f00 transparent; 
} 
/* triangle white, on top */
.tooltip::after {
content:""; 
position:absolute; 
bottom:-13px; 
left:47px; 
border-width:13px 13px 0; 
border-style:solid; 
border-color:#fff transparent; 
}