伪元素学习包含::before、::after的用法

最新推荐文章于 2025-06-12 23:19:00 发布

原创最新推荐文章于 2025-06-12 23:19:00 发布 · 5.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#::before #::after

前端学习笔记专栏收录该内容

30 篇文章

订阅专栏

本文介绍 CSS 伪元素::before 和::after 的实际应用案例，包括如何使用 content 属性配合 url() 引入图片，以及如何利用伪元素实现聊天框等布局效果。

<!DOCTYPE html>
<html>
<head>
<title>伪元素的用法</title>
<style type="text/css">
a{
text-decoration: none;
}
a::before{/*content必须配合url()的使用*/
content: url(image/hao123.png);
}
a::after{
content: url(href);
margin: 20px;
}
.bigbox{
width: 312px;
height: 72px;
}
.touxiang{
width: 70px;
height: 72px;
border-radius: 50%;/*每个角都是圆角*/
overflow: hidden;/*溢出隐藏*/
background:url(image/picture1.png) no-repeat -24px -10px;/*负号是向左移的意思*/
border:1px solid #000000;
display: inline-block;/*修改图像的性质*/
}
.liaotiankuang{
width: 234px;
height: 60px;
background-color: #fff;
border: 1px solid #ababab;
border-radius: 10px 10px 10px 0;/*圆角*/
float: right;/*向右浮动和图片在一行上*/
/*不过遇到块级元素一占就占一整行*/
margin-top: 12px;/*72-60*/
position: relative;/*相对定位*/
}
.liaotiankuang::before{
content: url(image/picture2.png);
position: absolute;/*绝对定位*/
left:-28px;
top: 23px;
}
</style>
</head>
<body>
<a href="https://www.hao123.com/">hao123</a>
<div class="bigbox">
<div class="touxiang"> </div>
<div class="liaotiankuang"></div>
</div>
</body>
</html>