html tips 属性 after,CSS小技巧之:after和:before制作小三角和tips提示框

首先，我的思路就想设计一个这样的：(下图)

于是我就开始设计，代码如下：

Demo

.demo2{width: 400px; height: 400px; position: relative; background-color: #eaf0f2;margin-top: 50px;}

.demo2 a{

text-decoration: none;

transition:0.5;

display: inline-block;

font-family: '微软雅黑';

color: #fff;

padding: 5px 10px;

background-color: #369;

margin: 0 5px;

}

//构建tips整体小框框

.demo2 a:hover::after{

content: attr(title);

position: absolute;

top: -30px;

width: 100px;

background-color: red;

left: 0;

font-size: 12px;

padding: 3px 10px;

border-top-left-radius: 3px 50px;

border-bottom-left-radius: 50px 3px;

}

//构建tips小框框下的三角形

.demo2 a:hover::before{

content: '';

position: absolute;

width: 0;

height: 0;

left: 10px;

top: -10px;

border-top: 10px solid red;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

}

首页第二页