:after和:before炫酷用法總結

時間 2019-11-16

標籤用法總結简体版

原文原文鏈接

引入

　　　提到僞類，在個人印象中最經常使用的不過是:hover、:active、:link、:visited，還有css3裏的經常使用僞類選擇器:last-child、:first-child、nth-child(n)等等，說實在其餘的我發現"然並卵"。css

　　百度一下:after和:before會發現有不少關於研究它們用法的文章，形形色色各式各樣，說明這兩個僞元素在實際工做中仍是很實用的，再結合css3的動畫，它們能爲頁面添加不少意想不到的效果！html

從學習僞類，不當心又延伸到了僞類元素（eg.咱們常見的::before和:hover之間爲何缺乏了一個冒號呢?），那什麼又叫僞類元素？僞類和僞類元素有什麼區別？下面就跟着我一塊兒來學習一下吧O(∩_∩)O~有說的不對的地方歡迎批評指正！~css3

僞類和僞元素

　　 w3c上對僞類和爲元素的定義分別爲,　　bootstrap

僞類：僞類用於向某些選擇器添加特殊的效果。
僞元素：僞元素用於將特殊的效果添加到某些選擇器

css3爲了明確僞類和僞元素的區別，已經明確了單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素segmentfault

span:hover     //僞類
span::before   //僞元素

可是，爲了保證兼容性，如今僞元素廣泛仍是使用單引號。下面我將用單引號的形式給你們作介紹~瀏覽器

常見的僞類（pseudo-classes）和僞元素（pseudo-elements）ide

　　僞元素的兼容性學習

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
幾乎全部的移動瀏覽器。

僞元素:before和:after的定義和基本用法

定義動畫

:before 選擇器在被選元素的內容前面插入內容。 ui

:after 選擇器在被選元素的內容後面插入內容。

使用

　　使用 content 屬性來指定要插入的內容。　　

　　　content有幾個比較有用的值：

[String] – 使用引號包括一段字符串，將會向元素內容中添加字符串。示例：

   a:after { content: "↗"; }

attr() – 調用當前元素的屬性，能夠方便的好比將圖片的 Alt 提示文字或者連接的 Href 地址顯示出來。示例：

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

url() / uri() – 用於引用媒體文件。示例：

h1::before { content: url(logo.png); }

counter() – 調用計數器，能夠不使用列表元素實現序號功能。具體請參見 counter-increment 和 counter-reset 屬性的用法。示例：

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

----------------------------------- 一個粗糙的栗子 ---------------------------------------

爲了寫出讓本身看得懂也能讓別人看的懂的博客，下面咱們來舉一個（粗糙的）栗子~

詳細代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    blockquote{
        background-color: #ccc;
        color: #fff;
        height: 100px;
        width: 400px;
        text-align: center;
        line-height: 100px;
    }
    blockquote:hover:before{
        content: '啊啊啊啊哦';
        color: red;
    }

    blockquote:hover:after{
        content: '啊啊啊啊哦誒';
        color: green;
    }
    </style>
</head>
<body>
    <blockquote>我是一個blockquote</blockquote>
</body>
</html>

鼠標沒有移動到blockqoute上的時候是醬紫的，

鼠標移動到blockqoute上的時候是醬紫的，

這樣就實現了「僞元素:before和:after將特殊的效果添加到blockqoute上的效果」，固然這個很糙的栗子只是體現了它的基本用法而已，下面咱們來了解一下它的一些有意思的用法吧~

有意思的用法

清浮動

好吧，第一個用法確實沒什麼意思╮(╯_╰)╭，可是很實用有木有~(～￣▽￣)～

網上在介紹清浮動中最狂拽炫酷吊炸天的清浮動方法 : ) ，只要把.clearfix加在浮動父級就能夠了

    .clearfix{zoom:1;} 
    .clearfix:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

給浮動父級添加clearfix後

模擬float:center（固然並無center這個值，只是模擬）

這樣利用僞元素:before和浮動，就能創造出兩個沒有內容的佔位塊，實現文字環繞圖片的效果了~~效果蠻不錯的有木有

    .box .left{   //左邊的文字塊
        float: left;
    }

    .box .left:before{
        content: '';
        height: 245px;
        width: 153px;
        float: right;
    }

    .box .right{  //右邊的文字塊
        float: right;
    }

    .box .right:before{
        content: '';
        height: 245px;
        width: 153px;
        float: left;
    }

一些實用的小圖標、小圖形

　　這些圖標都是能夠利用僞元素作出來的喲！~不用再引用麻煩的bootstrap圖標了，還得引入他們的一堆文件惹，真麻煩~ (￣～￣) ~真矯情

DEMO（實用小圖標的源css代碼都在這裏面喲！）

還有3D的ribbons，不用圖片也能夠呢！只要只兼容IE8+就能夠用啦，Everybody loves ribbons,so do I. 時常以爲CSS真心是藝術~

DEMO（ribbon源碼）

做爲列表序號

怎樣做爲列表序號呢？我先舉個栗子~

像這樣的1,2,3的序號通常你們是怎樣作的呢？用span？用圖片？是否是用了span後還要進行定位？是否是很麻煩呢？

如今咱們能夠用僞元素來作列表序號，並且列表的一項刪除了之後，其餘的列表序號會自動改變，成爲一個有順序的列表~484很方便！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    ul{
        width:1000px;
        margin: 0 auto;
        counter-reset:li;
    }

    li{
        list-style: none;
    }

    ul>li{
        background-color: #ccc;
        margin-top: 10px;
    }

    ul>li:before{
  content: counter(li); counter-increment:li;
        background-color: #333;
        padding: 0 5px;
        color: #fff;
        margin-right: 10px;
    }
    </style>
</head>
<body>
    <ul>
        <li>List item one</li>
        <li>The second item on the list</li>
        <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>And here is number four.</li>
        <li>The fifth item on the list</li>
        <li>The sixth item on the list</li>
    </ul>
</body>
</html>