::before和::after僞元素的用法

時間  2020-08-11
標籤 元素 用法 简体版
原文   原文鏈接

1、介紹

css3爲了區分僞類和僞元素，僞元素採用雙冒號寫法。css

常見僞類——:hover,:link,:active,:target,:not(),:focus。html

常見僞元素——::first-letter,::first-line,::before,::after,::selection。css3

::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。git

這些添加不會出如今DOM中，不會改變文檔內容，不可複製，僅僅是在css渲染層加入。web

因此不要用:before或:after展現有實際意義的內容，儘可能使用它們顯示修飾性內容，例如圖標。api

舉例：網站有些聯繫電話，但願在它們前加一個icon☎，就可使用:before僞元素，以下：ide

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

Note:這些特殊字符的html，js和css的寫法是不一樣的，具體可查看html特殊字符的html，js，css寫法彙總。網站

2、content屬性

::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認狀況下，僞類元素的display是默認值inline，能夠經過設置display:block來改變其顯示。ui

content可取如下值。url

一、string

使用引號包一段字符串，將會向元素內容中添加字符串。如：a:after{content:""}

舉例：

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
    content: "《";
    color: blue;
}
p::after{
    content: "》";
    color: blue;
}
</style>
<p>平凡的世界</p>

二、attr()

經過attr()調用當前元素的屬性，好比將圖片alt提示文字或者連接的href地址顯示出來。

<style type="text/css">
a::after{
    content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>

三、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>

四、counter()

調用計數器，能夠不使用列表元素實現序號功能。

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

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

代碼:

<style>
body{
    counter-reset: section;
}
h1{
    counter-reset: subsection;
}
h1:before{
    counter-increment:section;
    content:counter(section) "、";
}
h2:before{
    counter-increment:subsection;
    content: counter(section) "." counter(subsection) "、";
}
</style>
------------------------------------------------
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>

瞭解更多可參考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

3、使用

一、清除浮動

清除浮動方法有多種，如今最經常使用的就是下面這種方法，僅須要如下樣式便可在元素尾部自動清除浮動

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

二、模擬float:center的效果

float沒有center這個取值，可是能夠經過僞類來模擬實現。

這個效果實現頗有意思，左右經過::before float各自留出一半圖片的位置，再把圖片絕對定位上去。

核心css以下：

#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Float Both</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 14px/1.8 Georgia, serif;
    }
        #page-wrap { width: 60%; margin: 40px auto; position: relative; }
        #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
        #l, #r { width: 49%; }
        #l { float: left; }
        #r { float: right; }
        #l:before, #r:before { content: ""; width: 125px; height: 250px; }
        #l:before { float: right; }
        #r:before { float: left; }
    </style>
</head>
<body>
    <div id="page-wrap">
        <img src="img/cat.jpg" id="logo">
        <div id="l">
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </p>
        </div>
        <div id="r">
            <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
            </p>
        </div>
    </div>
</body>
</html>

出自：https://css-tricks.com/float-center/

三、作出各類圖形效果

舉例：一個六角星

<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>
<body>
<div id="star-six"></div>
</body>

#star-six的div是一個正三角行，#star-six::after是一個倒三角形，經過絕對定位，調整其位置便可實現六角星的效果。

 

四、不使用圖片建立小圖標

舉例：好比一個電話

很巧妙的應用一個div左border加圓角當機身，::before和::after配合圓角當聽筒。

<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>

<!doctype html>
<html>
<head>
    <title>僞類標籤使用</title>
</head>
<style type="text/css">
    #wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;}
    #power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
    #power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
    #play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;}
    #pause{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #pause:before{height:20px;width:5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}
    #stop{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
    #stop:before{height:17px;width:17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}
    #comment{width: 50px;height: 25px;margin:20px;border: 6px solid #EEB422;border-radius: 20%;position:relative;display: inline-block;background: #EEB422;}
    #comment:before{border:10px solid transparent;border-top:10px solid #EEB422;content: "";position: absolute;left:28px;top: 28px;}
    #comment:after{content: "....";position: absolute;color: #fff;font-size: 26px;top: -10px;left: 2px;}
    #like{width: 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}
    #like:before{width:50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}
    #search{width: 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}
    #search:before{width:20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}
    #home{width: 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #home:before{width:6px;height:12px;background:#fff;content: "";position: absolute;left:12px;top: 20px;}
    #home:after{border:25px solid transparent;border-bottom:20px solid #EEB422;content: "";position: absolute;top: -38px;left:-10px;}
    #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #photo:before{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}
    #photo:after{width:15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}
    #photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email{width:50px;height:35px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #email:before{border:25px solid transparent;border-top:20px solid #fff;content: "";position: absolute;left:0px;top: 2px;}
    #email:after{border:25px solid transparent;border-top:20px solid #EEB422;content: "";position: absolute;top:0px;}
    #file{width:30px;height:45px;border:4px solid #EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
    #file:before{border:10px solid #fff;border-right:10px solid #EEB422;border-bottom:10px solid #EEB422;content: "";position: absolute;left:-4px;top: -4px;}
    #file:after{width:20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}
    #history{width:35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}
    #history:before{width:14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}
    #video{width:50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}
    #video:before{width:6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}
    #video:after{width:10px;height:10px;border:6px solid transparent;border-top:6px solid #EEB422;border-left:6px solid #EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:13px;top: 35px;}
    #tags{width:50px;height:25px;background:#EEB422;border-radius: 35% 0% 0% 35%;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:20px;margin-left:35px;position:relative;display: inline-block;top: -5px;}
    #tags:before{width:10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}
    #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;}
    #profile{width: 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}
    #profile:before{width: 20px;height:22px;background:#EEB422;border-radius:40%;content: "";position: absolute;left: 10px;top: -22px;}
</style>
<body>
    <div id="wraper">
        <div id="power"></div>
        <div id="play"></div>
        <div id="pause"></div>
        <div id="stop"></div>
        <div id="comment"></div>
        <div id="like"></div>
        <div id="search"></div>
        <div id="home"></div>
        <div id="photo"></div>
        <div id="email"></div>
        <div id="file"></div>
        <div id="history"></div>
        <div id="video"></div>
        <div id="tags"></div>
        <div id="phone"></div>
        <div id="profile"></div>
    </div>
</body>
</html>

這個效果來自：http://www.w3cfuns.com/blog-5444604-5402127.html

有大神用僞元素建立了84種小圖標，具體可查看http://nicolasgallagher.com/pure-css-gui-icons/

 

五、顯示打印網頁的URL

<style>
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}
</style><body>
<a href="http://www.baidu.com">百度</a>
</body>

六、給blockquote添加引號

常常用到給blockquote 引用段添加巨大的引號做爲背景，能夠用 ：:before 來代替 background 。好處是便可以給背景留下空間，還能夠直接使用文字而非圖片：

<meta charset="utf-8"/>
<style type="text/css">
blockquote::before {
content: open-quote;
color: #ddd;
z-index: -1;
font-size:80px;
}
</style>
<blockquote>引用一個段落,雙引號用::before僞元素實現</blockquote>

 

七、超連接特效

舉例：配合 CSS定位實現一個鼠標移上去，超連接出現方括號的效果

<meta charset="utf-8" />
<style type="text/css">
body{
    background-color: #425a6c;
}
    a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    text-decoration: none;
    font-size: 32px;
    padding: 5px 20px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }
</style>
<a>鼠標移上去出現方括號</a>

更多創意連接特效可參考： Creative Link Effects 。

八、::before和::after實現多背景圖片

舉例：一個標籤應用5張背景圖

<meta charset="utf-8" />
<style type="text/css">
#silverback {
    position: relative;
    z-index: 1;
    min-width: 200px;
    min-height: 200px;
    padding: 120px 200px 50px;
    background: #d3ff99 url(img/vines-back.png) -10% 0 repeat-x;
}
#silverback:before, #silverback:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 100px;
}
#silverback:before {
    content: url(img/gorilla-1.png);
    padding-left: 3%;
    text-align: left;
    background: transparent url(img/vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
    content: url(img/gorilla-2.png);
    padding-right: 3%;
    text-align: right;
    background: transparent url(img/vines-front.png) 70% 0 repeat-x;
}
</style>
<div id="silverback">一個標籤應用了5張背景圖片</div>

原效果來自：Multiple Backgrounds and Borders with CSS 2.1

 

原文地址：http://www.cnblogs.com/starof/p/4459991.html

相關文章