before 和after的用法

最新推荐文章于 2024-07-11 21:11:19 发布
最新推荐文章于 2024-07-11 21:11:19 发布
阅读量5.4k 收藏 23
点赞数 3
分类专栏： 项目心得 文章标签： 伪标签 after before

转载自：lur88

一、介绍

css3为了区分伪类和伪元素，伪元素采用双冒号写法。(:before和:after是在CSS2中提出来的，CSS3中的写法是::before和::after)

常见伪类——:hover,:link,:active,:target,:not(),:focus。

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

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

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

Note:

1、这些特殊字符的html，js和css的写法是不同的，如下

⇠  箭头类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
⇠&#8672\u21E0\21E0⇢&#8674\u21E2\21E2
⇡&#8673\u21E1\21E1⇣&#8675\u21E3\21E3
↞&#8606\u219E\219E↠&#8608\u21A0\21A0
↟&#8607\u219F\219F↡&#8609\u21A1\21A1
←&#8592\u2190\2190→&#8594\u2192\2192
↑&#8593\u2191\2191↓&#8595\u2193\2193
↔&#8596\u2194\2194↕&#8597\u2195\2195
⇄&#8644\u21C4\21C4⇅&#8645\u21C5\21C5
↢&#8610\u21A2\21A2↣&#8611\u21A3\21A3
⇞&#8670\u21DE\21DE⇟&#8671\u21DF\21DF
↫&#8619\u21AB\21AB↬&#8620\u21AC\21AC
⇜&#8668\u21DC\21DC⇝&#8669\u21DD\21DD
↚&#8602\u219A\219A↛&#8603\u219B\219B
↮&#8622\u21AE\21AE↭&#8621\u21AD\21AD
⇦&#8678\u21E6\21E6⇨&#8680\u21E8\21E8
⇧&#8679\u21E7\21E7⇩&#8681\u21E9\21E9
▲&#9650\u25B2\25B2►&#9658\u25BA\25BA
▼&#9660\u25BC\25BC◄&#9668\u25C4\25C4
➔&#10132\u2794\2794➙&#10137\u2799\2799
➨&#10152\u27A8\27A8➲&#10162\u27B2\27B2
➜&#10140\u279C\279C➞&#10142\u279E\279E
➟&#10143\u279F\279F➠&#10144\u27A0\27A0
➤&#10148\u27A4\27A4➥&#10149\u27A5\27A5
➦&#10150\u27A6\27A6➧&#10151\u27A7\27A7
➵&#10165\u27B5\27B5➸&#10168\u27B8\27B8
➼&#10172\u27BC\27BC➽&#10173\u27BD\27BD
➺&#10170\u27BA\27BA➳&#10163\u27B3\27B3
↷&#8631\u21B7\21B7↶&#8630\u21B6\21B6
↻&#8635\u21BB\21BB↺&#8634\u21BA\21BA
↵&#8629\u21B5\21B5↯&#8623\u21AF\21AF
➾&#10174\u27BE\27BE    

❤  基本形状类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
❤&#10084\u2764\2764✈&#9992\u2708\2708
★&#9733\u2605\2605✦&#10022\u2726\2726
☀&#9728\u2600\2600◆&#9670\u25C6\25C6
◈&#9672\u25C8\25C8▣&#9635\u25A3\25A3
☻&#9787\u263B\263B☺&#9786\u263A\263A
☹&#9785\u2639\2639✉&#9993\u2709\2709
☎&#9742\u260E\260E☏&#9743\u260F\260F
✆&#9990\u2706\2706�&#65533\uFFFD\FFFD
☁&#9729\u2601\2601☂&#9730\u2602\2602
❄&#10052\u2744\2744☃&#9731\u2603\2603
❈&#10056\u2748\2748✿&#10047\u273F\273F
❀&#10048\u2740\2740❁&#10049\u2741\2741
☘&#9752\u2618\2618❦&#10086\u2766\2766
☕&#9749\u9749\9749❂&#10050\u2742\2742
☥&#9765\u2625\2625☮&#9774\u262E\262E
☯&#9775\u262F\262F☪&#9770\u262A\262A
☤&#9764\u2624\2624✄&#9988\u2704\2704
✂&#9986\u2702\2702☸&#9784\u2638\2638
⚓&#9875\u2693\2693☣&#9763\u2623\2623
⚠&#9888\u26A0\26A0⚡&#9889\u26A1\26A1
☢&#9762\u2622\2622♻&#9851\u267B\267B
♿&#9855\u267F\267F☠&#9760\u2620\2620

¥  货币类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
$&#36\u0024\0024¢&#162\u00A2\00A2
£&#163\u00A3\00A3¤&#164\u00A4\00A4
€&#8364\u20AC\20AC¥&#165\u00A5\00A5
₱&#8369\u20B1\20B1₹&#8377\u20B9\20B9

½  数学类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
½&#189\u00BD\00BD¼&#188\u00BC\00BC
¾&#190\u00BE\00BE⅓&#8531\u2153\2153
⅔&#8532\u2154\2154⅛&#8539\u215B\215B
⅜&#8540\u215C\215C⅝&#8541\u215D\215D
‰&#8240\u2030\2030%&#37\u0025\0025
<&#60\u003C\003C>&#62\u003E\003E

♫  音乐符号类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
♩&#9833\u2669\2669♪&#9834\u266A\266A
♫&#9835\u266B\266B♬&#9836\u266C\266C
♭&#9837\u266D\266D♯&#9839\u266F\266F

✖  对错号

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
 &#160\u00A0\00A0☐&#9744\u2610\2610
☑&#9745\u2611\2611☒&#9746\u2612\2612
✓&#10003\u2713\2713✔&#10004\u2714\2714
✕&#10005\u10005\10005✖&#10006\u2716\2716
✗&#10007\u2717\2717✘&#10008\u2718\2718

★  全都是星星

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
★&#9733\u2605\2605✭&#10029\u272D\272D
✮&#10030\u272E\272E☆&#9734\u2606\2606
✪&#10026\u272A\272A✡&#10017\u2721\2721
✯&#10031\u272F\272F✵&#10037\u2735\2735
✶&#10038\u2736\2736✸&#10040\u2738\2738
✹&#10041\u2739\2739✺&#10042\u273A\273A
✱&#10033\u2731\2731✲&#10034\u2732\2732
✴&#10036\u2734\2734✳&#10035\u2733\2733
✻&#10043\u273B\273B✽&#10045\u273D\273D
❋&#10059\u274B\274B❆&#10054\u2746\2746
❄&#10052\u2744\2744❅&#10053\u2745\2745

♒  星座类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
♈&#9800\u2648\2648♉&#9801\u2649\2649
♊&#9802\u264A\264A♋&#9803\u264B\264B
♌&#9804\u264C\264C♍&#9805\u264D\264D
♎&#9806\u264E\264E♏&#9807\u264F\264F
♐&#9808\u2650\2650♑&#9809\u2651\2651
♒&#9810\u2652\2652♓&#9811\u2653\2653

♚  国际象棋类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
♚&#9818\u265A\265A♛&#9819\u265B\265B
♜&#9820\u265C\265C♝&#9821\u265D\265D
♞&#9822\u265E\265E♟&#9823\u265F\265F
♔&#9812\u2654\2654♕&#9813\u2655\2655
♖&#9814\u2656\2656♗&#9815\u2657\2657
♘&#9816\u2658\2658♙&#9817\u2659\2659

♣  扑克牌类

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
♠&#9824\u2660\2660♣&#9827\u2663\2663
♥&#9829\u2665\2665♦&#9830\u2666\2666
♤&#9828\u2664\2664♧&#9831\u2667\2667
♡&#9825\u2661\2661♢&#9826\u2662\2662

Ω  希腊字母

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
Α&#913\u0391\0391Β&#914\u0392\0392
Γ&#915\u0393\0393Δ&#916\u0394\0394
Ε&#917\u0395\0395Ζ&#918\u0396\0396
Η&#919\u0397\0397Θ&#920\u0398\0398
Ι&#921\u0399\0399Κ&#922\u039A\039A
Λ&#923\u039B\039BΜ&#924\u039C\039C
Ν&#925\u039D\039DΞ&#926\u039E\039E
Ο&#927\u039F\039FΠ&#928\u03A0\03A0
Ρ&#929\u03A1\03A1Σ&#931\u03A3\03A3
Τ&#932\u03A4\03A4Υ&#933\u03A5\03A5
Φ&#934\u03A6\03A6Χ&#935\u03A7\03A7
Ψ&#936\u03A8\03A8Ω&#937\u03A9\03A9

☩  十字

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
☨&#9768\u2628\2628☩&#9769\u2629\2629
✝&#10013\u271D\271D✞&#10014\u271E\271E
✟&#10015\u271F\271F✠&#10016\u2720\2720
✚&#10010\u271A\271A†&#8224\u2020\2020
✢&#10018\u2722\2722✤&#10020\u2724\2724
✣&#10019\u2723\2723✥&#10021\u2725\2725

©  法律符号

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
®&#174\u00AE\00AE©&#169\u00A9\00A9
℗&#8471\u2117\2117™&#153\u0099\0099
℠&#8480\u2120\2120    

@  标点和符号

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
«&#171\u00AB\00AB»&#187\u00BB\00BB
‹&#139\u008B\008B›&#155\u009B\009B
“&#8220\u201C\201C”&#8221\u201D\201D
‘&#8216\u2018\2018’&#8217\u2019\2019
•&#8226\u2022\2022◦&#9702\u25E6\25E6
¡&#161\u00A1\00A1¿&#191\u00BF\00BF
℅&#8453\u2105\2105№&#8470\u2116\2116
&&#38\u0026\0026@&#64\u0040\0040
℞&#8478\u211E\211E℃&#8451\u2103\2103
℉&#8457\u2109\2109°&#176\u00B0\00B0
|&#124\u007C\007C¦&#166\u00A6\00A6
–&#8211\u2013\2013—&#8212\u2014\2014
…&#8230\u2026\2026&#182\u00B6\00B6
∼&#8764\u223C\223C≠&#8800\u2260

2、创建的伪元素默认是在所依附的元素之上的，我们可以使用z-index:-1;把它放到下面

去

3、input、img、iframe等元素都不能包含其他元素，所以不能通过伪元素插入内容。

二、content属性

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

content可取以下值：

1、string

2、attr——调用当前元素的属性

eg:

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

运行结果：

3、URL/URI——引用媒体文件

eg:content:url("https://www.baidu.com/img/baidu_jgylogo3.gif");

4、counter()——不使用列表元素实现序号功能

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<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>
</head>
<body>
	<h1>HTML tutorials</h1>
	<h2>HTML Tutorial</h2>
	<h2>XHTML Tutorial</h2>
	<h2>CSS Tutorial</h2>

<span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Scripting tutorials<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>JavaScript<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>VBScript<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>XML tutorials<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>XML<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>XSL<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>

</body>
</html>

运行结果：

三、使用

1、清除浮动

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

.cf::before,

.cf::after{

content:"";

display:table;

}

.cf::after{

clear:both;

}

.cf{

*zoom:1;

}

2、模拟float:center的效果

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

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

<!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 { width:250px; height:250px; 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=“1.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>

运行结果如下：


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>

<body>

<div id=“star-six”></div>

</body>

运行结果：


4、不使用图片创建小图标

举例：比如一个电话

很巧妙的应用一个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>

5、显示打印网页的URL

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<title>Document</title>

</head>

<style>

@media print {

a[href]:after {

content: " (" attr(href) ") ";

}

}

</style>

<body>

<a href=“http://www.baidu.com”>百度</a>

</body>

</html>

6、给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>

7、超链接特效

举例：配合 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 。

8、::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

这个效果看的真的是脑洞大开，虽然多背景图用css3的background-image很容易就能实现。但是这篇文章是10年写的，已经过去5年了，想想也正是他们这样的尝试和努力才加速了css3标准的制定，让今天的开发更easy。今天的我们又能为5年后的开发人员做些什么贡献呢？



少废话|上代码丶
关注
专栏目录
before和after怎么区分_before和after区别 after的用法
weixin_39524183的博客
12-21 1万+
导航：网站首页 >before和after区别 after的用法before和after区别 after的用法相关问题:匿名网友:一、意思不同1、before作连词意思是在 ... 以前。作介词意思是在 ... 以前；在..前面。作副词意思是以前；以往；之前。2、after作副词意思有以后；后来。作连词意思是在 ... 以后。作介词意思有在 ... 之后；在后面；关于；追赶；依照。作形容词意...
详解css3中的伪类before和after常见用法
01-18
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下： #example:before { content: #; color: red; } #example
before和after的用法
lurr88的博客
03-30 1万+
一、介绍css3为了区分伪类和伪元素，伪元素采用双冒号写法。(:before和:after是在CSS2中提出来的，CSS3中的写法是::before和::after)常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。::be...
after和before的作用及使用方法
仗剑天涯
10-30 4498
:after和:before的作用及使用方法 1、 :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例： HTML代码： <p>你好</p> CSS代码： p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; } 效果图如下： 以上代码是:before和:after的基本用法，但是这两种伪类还有很多更方便的用法。 2、：
::before和::after的用法
shaonian1996
04-13 2082
::before和::after的用法1 ::after清除浮动：ul:after{ content: ''; display: block;//变成块状元素 width: 0; height: 0; clear: both; }2 ::before和::after 用来写小三角形html:&lt;!DOCTYPE html&gt; &lt;html&gt;...
网站开发进阶(七十一）：css伪元素::before和::after用法详解
IT全栈 华强工作室
05-11 7481
文章目录一、前言二、伪元素::before和::after用法三、::before 和 ::after 特点四、::before 和 ::after 常见使用场景4.1 清除浮动4.2 利用attr()来实现某些动态功能4.3 与counter()结合实现序号问题，而不用使用列表元素4.4 超链接特效4.5 特效使用五、拓展阅读 一、前言 CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元
CSS伪类对象before和after的用法实例详解
12-10
一直感觉这两个伪类对象不是很重要，并且IE对它两兄弟并不支持，所以...2、selector:after( sRules ) 和before用法一样，不过它是设置在对象后（依据对象树的逻辑结构）发生的内容； 看例子容易理解些！ 复制代码代码如
伪元素before和after用法
06-13
:before和:after伪元素的使用方法如下： 1. 语法： ``` selector:before { content: ""; } selector:after { content: ""; } ``` 2. 属性： - content：用于定义伪元素的内容，其取值可以是字符串、URL、...
【CSS 技能提升】 :before和:after的使用
weixin_30312659的博客
04-09 172
前几天的晚上较全面的去看了下css的一些文档和资料，大部分的样式运用都没什么大问题了，只是有些许较陌生，但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多，主要是针对:before和:after写一些内容，还有几个小样式略微带过的介绍下。 什么是:before和:after？ 该如何使用他们？ :before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:...
css中::before ::after的用法
05-31 1789
css中::before ::after的用法 （干货）
css伪元素:before和:after的用法
aliven1的博客
07-03 1526
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。 css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使
CSS——伪元素&:before
samn_aa的博客
03-12 4163
content从定义我们知道::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。其实::after和::before被引入css中，最核心的目的，还是为了实现语义化。在我们实际开发时候经常有这样的经历，为了实现一些效果，在文档中创建了一些没有实际内容的节点，或者加入辅助样式的文本.
CSS 中的 ::before 和 ::after 伪元素
最新发布
m0_65029152的博客
07-11 4335
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
css before和after伪类的一些用法
top冰激凌的博客
01-11 2万+
一  :after清除浮动 浮动布局导致高度坍塌影响到整体布局时元素需要清除浮动，使用:after就是其中的一种方法： .row:after { width:0; height:0; content:''; display: block; clear: both; } 二  :before和:after圆环旋转 html： 圆环旋转
css伪元素详解
weixin_30888027的博客
03-15 378
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。 css有一系列的伪元素，如:before，:af...
css伪元素:before和:after用法详解
仗剑天涯，从摘要开始
05-19 4841
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。 css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使
CSS 中 ::before 和 ::after 伪元素的几个实际用途
南城
05-29 8571
基于 CSS 中 ::before 和 ::after 伪元素的几个实际场景的运用，文末还有苹果充电线的实现。
::before和::after是什么?
热门推荐
lb6514052的博客
02-27 2万+
本文从最简单的开始，解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。 content属性 1）::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。 2）::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值