Html 使用.X.Y类型选择器的属性后CSS异常行为

我不确定CSS

：after

伪类是否需要这样做

我有什么？

我正在尝试使用CSS创建工具提示。下面是我正在使用的HTML和CSS。拨弄

HTML

<div class="tooltip tooltip-left">
        :(
</div>

.tooltip {
    display:inline-block;
    position:absolute;
    background: #002663;
    height:100px;
    width:300px;
    color:#fff;
    padding:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*TOP*/
.tooltip-top:after {
    content:"";
    display: block;
    position:absolute;  
    bottom:-20px;
    left:50%;
    border-top:20px solid #002663;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    margin-left:-20px;
};
/*LEFT*/
.tooltip-left:after {
    content:"";
    display: block;
    position:absolute;  
    right: -20px;
    top: 50%;
    border-left: 20px solid #002663;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    margin-top: -20px;
};

什么事这么奇怪？

工具提示在当前小提琴中不包含箭头。但是，如果我注释类

。工具提示top:after

会出现箭头

---

为什么会有这种行为？我是否可以使用应用于同一元素的不同类为

：在
伪元素之后声明多个定义？
在.tooltip top:after class之后有一个尾随分号。移除它。这会导致下一节课无法阅读

.tooltip-top:after {
    content:"";
    display: block;
    position:absolute;  
    bottom:-20px;
    left:50%;
    border-top:20px solid #002663;
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    margin-left:-20px;
};  /* <-- This ; is what's causing the problem */

。工具提示顶部：之后{
内容：“；
显示：块；
位置：绝对位置；
底部：-20px；
左：50%；
边框顶部：20px实心#002663；
左边框：20px实心透明；
右边框：20px实心透明；
左边距：-20px；
};  /*  CSS:

HTML:

<a href="http://bavotasan.com" class="top-tip" data-tips="Go to bavotasan.com">bavotasan.com</a>



将data tips=“”参数添加到任何HTML元素中，并添加一个类来设置方向，将显示工具提示

请尝试以下链接：
注意
：在
不是伪类之后，它是一个伪元素。在选择器语法方面，它们非常不同——尤其是每个选择器不能有一个以上的伪元素。这是什么？为什么？我该进行视力测试了谢谢
<a href="http://bavotasan.com" class="top-tip" data-tips="Go to bavotasan.com">bavotasan.com</a>