将 css 边框添加到 :after 元素 [英] Adding css border to :after element

问题描述

我有类似气泡的弹出窗口，在悬停时显示.我需要在气泡周围添加边框，但问题是我无法为气泡的指针添加边框.

I have bubble-like pop-up which displays on hover. I need to add a border around the bubble, but the problem is that I'm unable to add a border to the pointer of the bubble.

箭头是由 .bubble:after

您可以在此处查看小提琴 http://jsfiddle.net/livewirerules/c2Lh6zv6/1/

You can view the fiddle here 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%;
}

任何帮助将不胜感激

推荐答案

尝试添加一个 :before 元素，该元素创建与您的 :after 相同的箭头，但使其变大一点，并显示为红色.确保 :before 在你的 :after 后面，它应该产生与在你的 :after 箭头上有边框相同的效果.

Try adding a :before element that creates the same arrow as your :after but make it a little bit larger, and red. make sure the :before is behind your :after and it should give the same affect as having a border on your :after arrow.

.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

修正小提琴

edit: linked to correct jsfiddle

revised fiddle

这篇关于将 css 边框添加到 :after 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！