Untitled

<a>Hover Me! <i>Here is the new version of <br />Pure CSS arrow with border (tooltip)<br />with left arrow</i></a>

body { 

  background: #32373D; 

  text-align:left; 

  padding: 60px 30% 50px;

}

a {

  position: relative;

  cursor: pointer;

  font: normal normal 85% sans-serif;

  color: white;

  text-shadow: #090A0B 0 -1px;

  display: inline-block;

}

a > i {

  text-align: center;

  font: italic normal 90% Georgia, serif;

  line-height: 150%;

  color: black;

  text-shadow: white 0 1px;

  background: #DDD;

  background-clip: padding-box;

  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);

  border: 5px solid #111;

  border: 5px solid rgba(0, 0, 0, 0.5);

  border-radius: 3px;

  position: absolute;

  width: 250px;

  left: 110%;

  margin-left:5px;

  padding: 10px 0;

  bottom:0%;

  margin-bottom: -25px;

  visibility:hidden;

  opacity:0;

  -webkit-transition: opacity 0.5s linear;

  -moz-transition: opacity 0.5s linear;

  -ms-transition: opacity 0.5s linear;

  -o-transition: opacity 0.5s linear;

  transition: opacity 0.5s linear;

}

a > i:before, a > i:after {

  content: "";

  position: absolute;

  border-bottom: 10px solid transparent;

    border-right:10px solid transparent;

  top: 50%;

  left: 0%;

  margin-left: -10px;

}

a > i:before {

  border-top: 13px solid #111;

  border-bottom: 13px solid #111; 

  border-right:9px solid #111;

    border-top: 10px solid transparent;

  border-left: 10px solid transparent;

  border-bottom:10px solid transparent;

  margin-left: -22px;

  z-index: 1;

}

a > i:after{

  border-top: 10px solid #DDD;

  border-bottom: 10px solid #DDD; 

  border-right:10px solid #DDD;

    border-top: 10px solid transparent;

  border-left: 10px solid transparent;

  border-bottom:10px solid transparent;

  margin-left: -18px;

  z-index: 1;

}

a:hover > i {

  visibility: visible;

  opacity: 1;

}