::after伪元素增加小箭头样式

大阳plus

已于 2022-07-23 16:50:14 修改

阅读量484

点赞数

分类专栏： css 文章标签： css

于 2022-07-23 16:30:24 首次发布

本文链接：https://blog.csdn.net/weixin_43400431/article/details/125949395

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

.showTips{
  position: absolute;
  top: -35px;
  right: 5px;
  border: 1px solid #c3d0e2;
  border-radius: 5px;
  padding: 2px;
  color: #788ca7;
  background: #f7f8fb;
  font-weight: 500;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  &::before{
    box-sizing: content-box;
    position: absolute;
    top: 21px;
    left: 30.1px;
    border-bottom: 5px solid transparent;
    border-top: 5px solid #f7f8fb;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display: block;
    content: '';
    z-index: 2;
  }
  &::after{
    box-sizing: content-box;
    position: absolute;
    top: 22px;
    left: 30px;
    border-bottom: 5px solid transparent;
    border-top: 5px solid rgb(190, 190, 190);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display: block;
    content: '';
    z-index: 1;
  }
}