使用CSS设置工具提示箭头的边框颜色(Set Border Color of Tooltip Arrow with CSS)

 我试图将工具提示的箭头键的边框颜色设置为白色。 我能够将工具提示的底部边框颜色设置为白色，如何设置箭头的底部边框颜色呢？ 这是我尝试过的： 
 
 
 
 
 
  
.hint {
  position: relative;
  display: inline-block;
}

.hint:before,
.hint:after {
  position: absolute;
  opacity: 0;
  z-index: 100;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  pointer-events: none;
}

.hint:hover:before,
.hint:hover:after {
  opacity: 1;
}

.hint:before {
  content: '';
  position: absolute;
  background: transparent;
  border: 6px solid transparent;
  position: absolute;
  transform: translateX(-50%);
}

.hint:after {
  content: attr(data-hint);
  background: rgba(0, 0, 0, 0.8);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  color: white;
  padding: 8px 10px;
  font-size: 16px;
  font-style: italic;
  white-space: nowrap;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}


/* top mouse-icon*/

.hint--top:before {
  bottom: 100%;
  left: 50%;
  margin: 0 0 -18px 0;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.hint--top:after {
  bottom: 100%;
  left: 50%;
  margin: 0 0 -6px -10px;
}


/*arrow key*/

.hint--top:hover:before {
  margin-bottom: -12px;
  border-width: 12px;
  /*margin-left: -56px;*/
  border-color: rgba(194, 225, 245, 0);
  border-top-color: rgba(0, 0, 0, 0.8);
}

.hint--top:hover:after {
  margin-bottom: 12px;
  border-width: 10px;
  /*margin-left: -50px;*/
  border-top-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #f0f0f0;
}
 
  
<br /><br /><br /><br />
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
  <a>Assalaamu 'Alaikum</a>
</div>
 
 
 
 
 
 为了澄清，我在这里包括样本图片。 现在我有这个： 
 
  
 
 但我需要类似下面给出的图像： 
 
  

I was trying to set border colour white of my tooltip's arrow key. I was able to set tooltips bottom border colour white, how can I set bottom border colour of arrow too? Here is what I tried:
 
 
 
 
 
  
.hint {
  position: relative;
  display: inline-block;
}

.hint:before,
.hint:after {
  position: absolute;
  opacity: 0;
  z-index: 100;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  pointer-events: none;
}

.hint:hover:before,
.hint:hover:after {
  opacity: 1;
}

.hint:before {
  content: '';
  position: absolute;
  background: transparent;
  border: 6px solid transparent;
  position: absolute;
  transform: translateX(-50%);
}

.hint:after {
  content: attr(data-hint);
  background: rgba(0, 0, 0, 0.8);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  color: white;
  padding: 8px 10px;
  font-size: 16px;
  font-style: italic;
  white-space: nowrap;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}


/* top mouse-icon*/

.hint--top:before {
  bottom: 100%;
  left: 50%;
  margin: 0 0 -18px 0;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.hint--top:after {
  bottom: 100%;
  left: 50%;
  margin: 0 0 -6px -10px;
}


/*arrow key*/

.hint--top:hover:before {
  margin-bottom: -12px;
  border-width: 12px;
  /*margin-left: -56px;*/
  border-color: rgba(194, 225, 245, 0);
  border-top-color: rgba(0, 0, 0, 0.8);
}

.hint--top:hover:after {
  margin-bottom: 12px;
  border-width: 10px;
  /*margin-left: -50px;*/
  border-top-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #f0f0f0;
}
 
  
<br /><br /><br /><br />
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
  <a>Assalaamu 'Alaikum</a>
</div>
 
 
 
 
 
For clarification, I am including sample picture here. Right now I have this:
 
 
But I need something like the given image below:
 

原文：https://stackoverflow.com/questions/47430098