Pin with label

by Kirubel Girma

HTML

<div class="lbpointer">
  <div class="polbl">This is cool keep it up</div>
  <div class="con_cirs">
    <div class="cirs"></div>
  </div>
</div>

CSS

*{
	  
	}
  
  .st0 {
	  fill: #ACB3BA;
	}
	
	.st1 {
	  fill: #9AA9B5;
	}
	
	.st2 {
	  fill: #FF7058;
	  stroke: #DDDDDD;
	  stroke-width: 3;
	  stroke-miterlimit: 10;
	}
	
	.polbl {
	  width:inherit;
	  max-width:15em;
	  padding: 1em 1em 1em 1em;
	  margin-bottom: 1em;
	  background: white;
    
	}
	
	.polbl::after {
    content: '';
    position: absolute;
    height: 1em;
    width: 1em;
    background: white;
    display: block;
    margin-top: .45em;
    transform: rotate(45deg);
	}
	
	.cirs {
	 
	  margin-left: .65em;
	  height: 1.3em;
	  width: 1.3em;
	  border-radius: 50%;
	  background: #FF7058;
	  border: white solid 0.2em;
	}
	
	.cirs::after {
	  content: '';
	  height: 1.1em;
	  width: 0.4em;
	  margin: 1.2em 0.45em 0.45em 0.45em;
	  position: absolute;
	  background: #9AA9B5;
	  border-radius: 12% 12% 100% 100%;
	}