你所不知道的伪元素用法——::before和::after

最近在项目中用到了::before::after,之前对其接触不深,用完之后才发现这两个元素的作用真心赞!在这里记录一下这两个伪元素的具体用法吧,希望能帮助到有缘人!~~
介绍这两个伪元素之前,不得不提与其混淆的另一个概念——伪类,伪类由单冒号:和伪类名组成,比如:hover:first-child等。而伪元素则是一类元素,用于插入内容,它既不受文档约束,也不影响文档本身,只会影响最终的样式。它的写法有两种,一种就是像伪类一样用单冒号:书写,比如:before:after等,这种写法多见于CSS2的版本,仅用来兼容IE8;但是自从CSS3面世以来,伪元素的写法就变成了双冒号形式,比如这样::before::after。由于现代浏览器一般都支持双冒号形式,所以我就以::before::after作为标题了,莫怪莫怪!

content属性

::before::after两个伪元素拥有一个特有的属性,那就是content,作用是在元素的头部或尾部添加内容,再重申一遍,这些内容并不会出现在文档流中,只不过会在CSS渲染层出现。通过MDN可以知道,content有以下几个比较重要的属性值(还有栗子):

  • [string] 添加一段字符串
// CSS
p::after {
    content: 'World';
}

// HTML
<p>Hello</p>

输出:

Hello World

  • attr() 调用当前元素的属性,并显示出来
// CSS
a::before {
    content: attr(href);
}

// HTML
<a href="http://www.jianshu.com"></a>

输出:

http://www.jianshu.com

  • url() 引用媒体文件,并显示出来 (CSS3试验性的属性)
// CSS
h1::before {
    content: url(logo.png);
}

// HTML
<h1>这是logo</h1>

好了,上面介绍了这么多的content的属性值,其实只不过是其最表面的用法,真正的奇技淫巧啊,就要靠大家的脑洞开发出来了。

奇技淫巧一:清除浮动

通常情况下,大家可能在需要清除浮动的地方加入元素<div style="clear:both;"></div>来清除浮动,但是这样的做法不免会添加许多多余的空元素,而且也不利于后期代码的维护工作,但是自从有了::after这个伪元素后,我们就可以用以下代码来清除浮动(简单易用):

// CSS
// 为了兼容IE6和IE7,触发haslayout
.clearfix { *zoom: 1; }
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
li {
    float: left;
}

// HTML
<ul class="box clearfix">
    <li>浮块一</li>
    <li>浮块二</li>
</ul>

奇技淫巧二:为引用内容添加引号

这个技巧彻底地为大家展示了怎样巧妙的配合 CSS 的特性,达到一个神奇的效果。。。

// CSS
blockquote {
    position: relative;
    text-align: center;
    font-size: 30px;
}
blockquote::before, blockquote::after {
    position: absolute;
    font-size: 90px;
    font-family: serif;
    font-weight: bolder;
    line-height: 1;
    top: 0;
}
blockquote::before {
    content: open-quote;
    left: 0;
}
blockquote::after {
    content: close-quote;
    right: 0;
}

// HTML
<blockquote>这是引用的内容!</blockquote>

输出:

引用

奇技淫巧三:添加各种动画效果(以光泽效果为例)

伪元素配合CSS3的动画,效果惊人!!!

// CSS
button {
    background: orangered;
    color: #fff;
    border: none;
    padding: 0 25px;
    border-radius: 8px;
    line-height: 32px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    position: relative;
    left: 50%;
    top: 50px;
    transform: scale(1, 1) translate(-50%, -50%);
    transition: all .5s cubic-bezier(0.67, -0.51, 0.42, 1.43);
}
button::after {
    content: '';
    width: 40px;
    height: 200%;
    position: absolute;
    top: -50%;
    left: -50%;
    background: linear-gradient(to right, rgba(229, 172, 142, 0), rgba(255,255,255,0.6) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(30deg);
}
button:hover::after, button:focus::after {
    animation: sheen 1s forwards .5s;
}
button:hover {
    transform: scale(2, 2);
}
@keyframes sheen {
    100% {
        left: 150%;
    }
}

// HTML
<button>闪光效果</button>

输出效果如下:

闪光效果

好啦,以上就是本人最近对::before::after两个伪元素的粗浅理解,望各位指正!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 转自理解伪元素 :before 和 :after层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一...
    种谔阅读 802评论 0 3
  • CSS的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上,CS...
    康斌阅读 2,629评论 0 12
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,455评论 1 19
  • 社会我羽哥,人傻命还多(3) 虞姬……虞姬…… 他的虞姬傻,他也傻。死亡在他和虞姬眼里,大抵都是不重要的。重要的,...
    奈潇潇阅读 158评论 0 0