伪元素before和after用法总结

常见伪元素:

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

其中::before和::after常用在项目中,巧妙的运用会会使很多样式的实现变得非常简单.

一般地,我们不去用::before和::after展示实际性的页面内容,多是修饰性的,像icon,角标,行标,还可以配合content清除浮动.

::before显示电话前的电话机icon:
这里写图片描述

    <style type="text/css">
        .phoneNumber::before {
        content:'\260E';
        font-size: 15px;
    }
    </style>
</head>

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

content属性:

::before和::after必须配合content属性来使用，content用来定义插入的内容 ,content可取以下值。

1 ) string

引号括起来的一段字符串,显示到当前元素的前后:

p::before{
    content: "《";
}
p::after{
    content: "》";
}
<p>平凡的世界</p>
//效果《平凡的世界》

2 ) attr()

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

<style>
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.csdn.com/starof">博客地址</a>
//效果    博客地址(http://www.csdn.com/starof)

3 ) url()/uri()

用于引用媒体文件。

举例：“百度”前面给出一张图片，后面给出href属性。

<style>
a::before{
    content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}
a{
    text-decoration: none;
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com">百度</a>
</body>

这里写图片描述
### 4 ) counter()

调用计数器，实现章节序号功能。

<style>
        body {
            counter-reset: section;
        }
        h1 {
            counter-reset: subsection;
        }
        h2 {
            counter-reset: subsection;
        }
        h1:before {
            counter-increment: section;
            content: counter(section) "、";
        }
        h2:before {
            counter-increment: subsection;
            content: counter(section) "." counter(subsection) "、";
        }
        h3:before {
            counter-increment: subsection;
            content: counter(section) "." counter(section) "."counter(subsection) "、";
        }
    </style>
</head>

<body>
    <h1>大标题</h1>
    <h2>&emsp;二副</h2>
    <h2>&emsp;二副</h2>
    <h2>&emsp;二副</h2>
    <h3>&emsp;&emsp;三副</h3>
    <h3>&emsp;&emsp;三副</h3>
    <h3>&emsp;&emsp;三副</h3>
</body>

这里写图片描述

运用

1、清除浮动

清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动

.cf:before,
.cf:after {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

2、float:居中

我们知道float没有center这个取值，但是可以通过伪类来模拟实现。

这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

3、做出各种图形效果

案例:六芒星

div做成三角形,将::after做成倒三角,绝对定位到div上

       #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;
}

这里写图片描述

不了解CSS绘制图形的点这里→Shape of CSS

4、超链接特效

举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }

这里写图片描述

常见的伪元素用法就说这么多,另外
附上一个有趣的连接:使用CSS3实现各类图形,效果满分