将css边框添加到:element之后

Question

我有悬浮时显示的泡泡状弹出窗口.我需要在气泡周围添加一个边框,但问题是我无法在气泡的指针上添加边框.

箭头是由 .bubble:after

你可以在这里查看小提琴http://jsfiddle.net/livewirerules/c2Lh6zv6/1/

下面是css

.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border:solid 1px red;
  text-align:center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}

任何帮助将不胜感激

Answer 1

尝试添加:before元素,创建与之相同的箭头:after,但要稍微大一点,然后选择红色.确保:之前是在你之后:之后它应该产生与你的箭头后边界相同的影响:

.bubble::before
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 16px 16px;
  border-color: red transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -16px;
  top: -16px;
  left: 50%;
}

编辑:链接到正确的jsfiddle

修改小提琴