html – 将css边框添加到：after元素之后

概述我有悬浮时显示的泡泡状d出窗口.我需要在气泡周围添加一个边框,但问题是我无法在气泡的指针上添加边框. 箭头由.bubble：after制作 你可以在这里查看小提琴http://jsfiddle.net/livewirerules/c2Lh6zv6/1/ 下面是css .bubble { display: none; z-index: 10; position: absolute; 我有悬浮时显示的泡泡状d出窗口.我需要在气泡周围添加一个边框,但问题是我无法在气泡的指针上添加边框.

箭头由.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%;}

任何帮助将不胜感激

解决方法 尝试添加：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
revised fiddle

总结

以上是内存溢出为你收集整理的html – 将css边框添加到：after元素之后全部内容，希望文章能够帮你解决html – 将css边框添加到：after元素之后所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。