css :before,:after伪元素的理解和妙用

最新推荐文章于 2024-08-12 18:59:22 发布

young_Emily

最新推荐文章于 2024-08-12 18:59:22 发布

阅读量1.1w

点赞数 7

分类专栏： css

本文链接：https://blog.csdn.net/young_emily/article/details/75255917

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.基本语法
·平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性。不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了。

·属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。在Web页面的HTML源代码里，你实际上找不到它们，但从视觉上，你却能看到它们的存在，所以我们用这个“伪”字就是表示它们假元素。

1> [String]  使用引号包括一段字符串，将会向元素内容中添加字符串。

  a:after { content: "↗"; } 

2>  attr()   调用当前元素的属性，将图片的 Alt 提示文字或者链接的 Href 地址显示出来。
  a:after { content:"(" attr(href) ")"; }  

3>  url()    uri() – 用于引用媒体文件。
  h1::before { content: url(logo.png); }     

4>  counter() –  调用计数器，可以不使用列表元素实现序号功能。
  h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

2.基本用法：
给元素前后添加内容，如给一个blockquote元素之前和之后加入引号

<style>
    blockquote:before {  
        content: open-quote;  
    }  
    blockquote:after {  
        content: close-quote;  
    }        
</style>
<blockquote>
    这是一个段落啊~
</blockquote>

效果： “这是一个段落啊~”
眨眼一看，这么用效果很鸡肋啊，各位看官别捉急 —> . —>
:before和:after虽然是伪元素，但它们所有用法和行为表现和真正的元素几乎完全一样；我们可以对它们进行任何的CSS样式设置，例如，改变它们的前景颜色，增加背景色/图，调整字体大小，调整对齐方式等等。
这里写图片描述

<style>
    blockquote:before {  
        content: open-quote;  
        font-size: 24pt;  
        text-align: center;  
        line-height: 42px;  
        color: #fff;  
        background: #ddd;  
        float: left;  
        position: relative;
        top: 0px;

    }  

    blockquote:after {  
        content: close-quote;  
        font-size: 24pt;  
        text-align: center;  
        line-height: 42px;  
        color: #fff;  
        background: #ddd;  
        float: right;
        position: relative;
        bottom: 10px; 
        right: 1300px;

    }  
</style>

如果想给引号设置长宽、加添加背景图/背景色，需要display：block;因为:before和:after伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素。
这里写图片描述

3.借用来清除浮动（清除浮动的主流方式O(∩_∩)O）

<!--clearfix是预清浮动的父级元素-->
.clearfix:after{content: "";display: block;clear: both;}
.clearfix{*zoom:1;}

4.特效妙用
鼠标移上链接，出现方括号：
移入鼠标前
移入鼠标后

<style>
  a {  
    position: relative;  
    display: inline-block;  
    outline: none;  
    text-decoration: none;  
    color: #000;  
    font-size: 32px;  
    padding: 5px 10px;  
    margin-left: 200px; 
    cursor: pointer;
  }  

    a:hover::before, a:hover::after { position: absolute; }  
    a:hover::before { content: "\5B"; left: -20px;color: #B20E00; }  
    a:hover::after { content: "\5D"; right:  -20px;color: #B20E00;  }  
</style>

同理配合display:block;和定位，可以实现各种移入鼠标后的视觉特效
鼠标移入后这里写图片描述

5.对文字进行美化

Html代码：
        <body>
            <span data-text='COOL'>COOL</span>  
        </body>

css代码：
        <style>
            *{  
                padding: 0;  
                margin: 0  
            }  
            span{  
                position: relative;  
                font-size: 12rem;  
                color: #0099CC  
            }  
            span::before{  
                position: absolute;  
                font-size: 12rem;  
                color: #333;  
                content: attr(data-text);  
                white-space:nowrap;  
                width: 50%;  
                /*此为左右型美化，若要改成上下型，则将此行变为height:50%;*/
                display: inline-block;  
                overflow: hidden  
            }  
        </style>

这里写图片描述

动态美化：

*{  
    padding: 0;  
    margin: 0  
}  
span{  
    position: relative;  
    font-size: 12rem;  
    color: #0099CC  
}  
span::before{  
    position: absolute;  
    font-size: 12rem;  
    color: #333;  
    content: attr(data-text);  
    white-space:nowrap;  /*规定段落中文本不换行*/
    height: 50%;  
    display: inline-block;  
    overflow: hidden;  
    transition:1s ease-in-out 0s;  
}  
span:hover::before{  
    height: 0;  
}  
注意：当这两个伪类放在一起时:hover要放在:before之前，否则不起作用;