Css3 伪元素::before和::after

一、::before / ::after 简介

::before 和 ::after 是 CSS 中的伪类，它们基本功能是在 CSS 渲染中向元素的内容前面和后面插入内容。虽然在实际 HTML 中我们没有增加任何标签，并且会在浏览器中展现出来。

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

默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

二、Content 属性的值

1. string

    <style>
        .phoneNumber::before {
            content: '260E';
            font-size: 15px;
        }
    </style>
    

    <p class="phoneNumber">12345645654</p>

2.attr()

    <style>
        a::after {
            content: attr(href);
            color: red;
        }
    </style>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

3.url()/uri()

    <style>
        a::before {
            content: url('http://www.jnqianle.cn/img/index/logo.png');
           
        }
    </style>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

    <a href="http://www.jnqianle.cn">千乐微云</a> 
    <br>

4.counter()

配合counter-increment和counter-reset属性使用：

h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

<style>
 2 body{
 3     counter-reset: section;
 4 }
 5 h1{
 6     counter-reset: subsection;
 7 }
 8 h1:before{
 9     counter-increment:section;
10     content:counter(section) "、";
11 }
12 h2:before{
13     counter-increment:subsection;
14     content: counter(section) "." counter(subsection) "、";
15 }
16 </style>
17 ------------------------------------------------
18 <body>
19 <h1>HTML tutorials</h1>
20 <h2>HTML Tutorial</h2>
21 <h2>XHTML Tutorial</h2>
22 <h2>CSS Tutorial</h2>
23 
24 <h1>Scripting tutorials</h1>
25 <h2>JavaScript</h2>
26 <h2>VBScript</h2>
27 
28 <h1>XML tutorials</h1>
29 <h2>XML</h2>
30 <h2>XSL</h2>
31 
32 </body>

View Code

三、使用案例和技巧

1.清楚浮动，强烈推荐

    <style>
        .block {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            border: 1px solid green;
        }
        /*去除首尾浮动*/
        .out::before,
        .out::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

    <div class="out">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>

    <a href="http://www.jnqianle.cn">千乐微云</a>
    <br>

    <a href="http://www.jnqianle.cn">千乐微云</a>
    <br>

View Code

2.标题效果处理

    <style>
     .title{
         font-size: 20px;
         font-weight: bold;
         padding: 5px 10px;
         display: inline-block;
         border: 1px solid #ddd;
     }
     .title::before{
         content: '《';
         color: green;
     }
     .title::after{
         content: '》';
         color: green;
     }
    </style>

    <div class="title">标题1</div>
    <div class="title">标题2</div>
    <div class="title">标题3</div>

3.多边形

<style>
#star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}

#star-six::after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}
</style>

<div id="star-six"></div>

View Code

    <style type="text/css">
        #phone {
            width: 50px;
            height: 50px;
            border-left: 6px solid #EEB422;
            border-radius: 20%;
            transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            margin: 20px;
            margin-right: 0px;
            position: relative;
            display: inline-block;
            top: -5px;
        }

        #phone:before {
            width: 15px;
            height: 15px;
            background: #EEB422;
            border-radius: 20%;
            content: "";
            position: absolute;
            left: -2px;
            top: 1px;
        }

        #phone:after {
            width: 15px;
            height: 15px;
            background: #EEB422;
            border-radius: 20%;
            content: "";
            position: absolute;
            left: -3px;
            top: 34px;
        }
    </style>
    <div id="wraper">
        <div id="phone"></div>
    </div>

View Code

4.给blockquote添加引号

    <style type="text/css">
        blockquote{
            border: 1px solid red;
        }
        blockquote::before {
            content: open-quote;
            color: #ddd;
            z-index: -1;
            font-size: 40px;
        }
        blockquote::after {
            content: close-quote;
            color: #ddd;
            z-index: -1;
            font-size: 40px;
        }
    </style>
    <blockquote>引用一个段落,双引号用::before伪元素实现引用一个段落,双引号用::before伪元素实现</blockquote>

View Code

5.会话框箭头效果

    <style>
        .left,
        .right {
            min-height: 40px;
            position: relative;
            display: table;
            text-align: center;
            border-radius: 7px;
            background-color: #9EEA6A;
            margin: 0;
        }

        .left {
            left: 10px;
        }

        .left::before,
        .right::after {
            position: absolute;
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            top: 11px;

        }

        .left::before {
            border: 8px solid transparent;
            border-right: 8px solid #9EEA6A;
            left: -16px;
        }

        .right::after {
            right: -16px;
            border-left: 8px solid #9EEA6A;
        }

        .left p,
        .right p {
            display: table-cell;
            vertical-align: middle;
            padding: 0 10px;
        }

        .right {
            right: -150px;
        }
    </style>
    <!-- 对话框 -->
    <div class="left">
        <p>最近怎么样</p>
    </div>
    <div class="right">
        <p>挺好的，最近有点忙，没有怎么联系你</p>
    </div>

View Code

6.其他动画效果等

Css3 border 详解

CSS3 进度条布局整理

相关阅读:
表删除准备
 爱可生技术文档
 Bran的内核开发指南_中文版
 LINUX 内核内存管理
 Linux Container测试之block IO
【实时文件同步】rsync+inotify-tools的安装与配置
 openlayer3 加载geoserver发布的WFS服务
 Geoserver跨域请求设置
 Bitmap 图片格式并用 C++ 读写 Bitmap
C++中的对象初始化
原文地址：https://www.cnblogs.com/tianma3798/p/15012654.html