CSS中伪元素::before和::after怎么用

小编给大家分享一下CSS中伪元素::before和::after怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

目前创新互联公司已为上1000家的企业提供了网站建设、域名、网页空间、网站托管、企业网站设计、徽县网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

::before和::after是什么?

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

content属性

1）::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

2）::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空

3）这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容

content可取以下值：

string

使用引号包一段字符串，将会向元素内容中添加字符串

 p::before{
    content: "《";
    color: #000000;
}
p::after{
    content: "》";
    color:#000000;
}

JavaScript高级程序设计

attr()

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

a::after {
    content: ' → ' attr(href); /* 在 href 前显示一个箭头 */
}

 百度地址

 a::after{
    content: "【" attr(href) "】";
}

百度地址

url()/uri()

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

a::before{
    content: url("img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}

百度地址

注意

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包一个div可以解决

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

::before和::after的应用

配合quotes 属性使用

加括号

 h2{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

给标题加括号

加引号

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

给标题加引号

不指定，默认

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

不设置quotes

装饰标题

h2 {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    text-align: center;
    gap: 40px;
}

h2::before, h2::after {
    content: '';
    border-top: 6px double;
}

标题

布局是通过将

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

彩带标题

 h2 {
    position: relative;
    margin: 0 auto 20px;
    padding: 10px 40px;
    text-align: center;
    background-color: #875e46;
}

h2::before, h2::after {
    content: '';
    width: 80px;
    height: 100%;
    background-color: #724b34;

    /* 定位彩带两端形状的位置，并且放在最底层 */
    position: absolute;
    z-index: -1;
    top: 20px;

    /* 彩带两端的形状 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

    /* 绘制并定位彩带的阴影三角形 */
    background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

h2::before {
    left: -60px;
}

h2::after {
    right: -60px;
    transform: scaleX(-1); /* 水平翻转 */
}
---------------------------
 
标题

实现更逼真的阴影

.box{margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc}
.shadow{position:relative;max-width:270px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset}
.shadow::after,.shadow::before{position:absolute;z-index:-1;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);content:"";transform:rotate(-3deg)}
.shadow::after{right:10px;left:auto;transform:rotate(3deg)}