css - 我似乎无法在我的箭头工具提示上添加边框

Question

我需要帮助将带有蓝色边框的箭头变成白色，就像包含文本的框一样。我需要使用 a 标签内的标题作为内容，但可以随意编辑其他所有内容，我设法使其达到一定程度，但似乎无法通过:

CSS

.toop {
   position: relative;
   padding: 0 5px;
   line-height: 23px;
}

.toop:hover:after {
   content: attr(title);
   color: #474747;
   font-size: 14px;
   line-height: 150%;
   text-align: left;
   background-color: #ffffff;
   border-radius: 5px;
   border: 2px solid #2192ce;
   padding: 5px 10px;
   opacity: 0.9;
   display: block;
   width: 180px;
   position: absolute;
   left: 10px; 
   bottom: 40px;
   z-index: 98;
}

.toop:hover:before {
   content: "";
   border: solid;
   border-color: #2191ce transparent;
   border-width: 10px 10px 0 10px;
   opacity: 0.9;
   display: block;
   left: 30px; 
   bottom: 30px;
   position: absolute;
   z-index: 99;
}

HTML

<br>
<br>
<br>
<br>
<br>

<a href="#" class="toop" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Tooltip is here</a>

Answer 1

你不能那样做，你不能在“箭头”周围设置边框。制作那个箭头是一个技巧，你可以用 css 来操纵 :after 和 :before 使它看起来像一个箭头，但你不能在除非您想使用图像并将其放在那个地方。

看我用你的代码做的例子来展示

outline: 2px solid #000;

outline 可用于在实际边界之外制作边界，但它不会像您想要的那样。

http://jsfiddle.net/pp9t0vqb/4/