这篇文章主要介绍css中:和:之前有什么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强> 1。和前,::后的主要作用是在元素内容前后加上指定内容,示例:
HTML代码:
CSS代码:
效果如图:
ul:{后
内容:& # 39;& # 39;;
显示:块;
宽度:0;
高度:0;
明确:;
}
<强> 3。:和之前:在用来写小三角形
在日常的工作中会经常遇到小三角形这样的小图标,可以用添加图片的方式实现,但是更方便的是用:,:在伪类来实现。
HTML代码:
CSS代码:
效果如图所示:
& lt; div类=發eft"比;
& lt; p>吃了吗& lt;/p>
& lt;/div>
& lt; div类=皉ight"祝辞
& lt; p>吃过了,吃了红烧排骨和酸菜鱼& lt;/p>
& lt;/div>
CSS代码:
效果如图所示:
.left,铃声{
最小高度:40像素;
位置:相对;
显示:表;
text-align:中心;
border - radius: 7 px;
background - color: # 9 eea6a;
边界:1 px固体# 736262;
}
铃声{/*使左右的对话框分开*/上图:40像素;
左:60 px;
}
.left祝辞p。正确的在p{/*使内容居中*/显示:表格单元;
vertical-align:中间;
填充:0 10 px;
}
.left:之前,对不对:之后,.left:之后,。右:{/*之前用伪类写出小三角形*/内容:& # 39;& # 39;;
显示:块;
宽度:0;
高度:0;
边界:8 px固体透明;
位置:绝对的;
上图:11 px;
}/*分别给左右两边的小三角形定位*/.left:{之前
边境:8 px固体# 9 eea6a;
左:-16 px;
}
{/*左后.left:边对话框小三角形的边框样式*/边境:8 px固体# 736262;
左:-17 px;
z - index: 1;
}
铃声:{后
border-left: 8 px固体# 9 eea6a;
右:-16 px;
}
铃声:{/*之前右边对话框小三角形的边框样式*/border-left: 8 px固体# 736262;
右:-17 px;
z - index: 1;
}
