WEB开发者-分享WEB开发知识,让开发变得更简单!

详解CSS中的伪元素::before和::after

本篇文章带大家了解一下CSS中的::before和::after伪元素,看看它们的应用,希望对大家有所帮助!

详解CSS中的伪元素::before和::after

本文从最简单的开始,解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。

::before和::after是什么?

::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。

详解CSS中的伪元素::before和::after

attr()

通过attr()调用当前元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。

详解CSS中的伪元素::before和::after

详解CSS中的伪元素::before和::after

url()/uri()

用于引用媒体文件。比如:“百度”前面给出一张图片,后面给出href属性。

详解CSS中的伪元素::before和::after

注意

1)URL不能使用引号。如果你将URL用引号括起来,那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容,插入的而不是图像本身。

2)content属性,直接使用图片,即使写width,height也无法改变图片大小;

解决方案:如果要解决这个问题,可以把content:''写成空,使用background:url()来添加图片

/*伪元素添加图片:*/
.wrap:after{
    /*内容置为空*/
    content:"";
    /*设置背景图,并拉伸*/
    background:url("img/06.png") no-repeat center;
    /*必须设置此伪元素display*/
    display:inline-block;
    /*必须设置此伪元素大小(不会被图片撑开)*/
    background-size:100%;
    width:100px;
    height:100px;
}复制代码

3)苹果端伪元素不生效,img、input和其他的单标签是没有:after和:before伪元素的(在部分浏览器中没有,如:苹果端会发现无效),因为单标签本身不能有子元素。

解决方案:给img包一个p可以解决

4)想要动态改变伪元素的图片,可以给当前元素添加伪元素图片的基础样式,再动态class来写伪元素的图片。

::before和::after的应用

配合quotes 属性使用

详解CSS中的伪元素::before和::after

加引号

 h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

<h2>给标题加引号</h2>

不指定,默认

 h3::before{
    content:open-quote;
}
h3::after{
    content:close-quote;
}

<h3>不设置quotes</h3>

装饰标题

详解CSS中的伪元素::before和::after

布局是通过将<h1>元素变成 3 列来实现的。左列和右列是双线,宽度均为minmax(50px, 1fr),这意味着它们的匹配宽度始终不小于50px。标题文本整齐地居中居中。

彩带标题

详解CSS中的伪元素::before和::after

实现更逼真的阴影

详解CSS中的伪元素::before和::after

详解CSS中的伪元素::before和::after

方式二:

.modern-clearfix {
    display: flow-root;
}

详解CSS中的伪元素::before和::after

详解CSS中的伪元素::before和::after

引用参考:

W3C官方文档

Diving into the ::before and ::after Pseudo-Elements

Faking ‘float: center’ with Pseudo Elements

原文地址:https://juejin.cn/post/6986629782666477599

作者:Axjy

相关推荐:《css视频教程》!

以上就是详解CSS中的伪元素::before和::after的详细内容,更多请关注web开发者其它相关文章!

本文链接:https://www.webkfz.com/WEBkF/wangyejishu/172809.html

版权声明:站内所有文章皆来自网络转载,只供分享作用,不代表本站的观点!

发表评论 共有 0 条评论)

联系客服
网站客服 业务合作 QQ
1244305267
公众号
公众号
公众号
返回顶部