CSS伪元素::before和::after的实例

一、伪元素::before和::after简单介绍和作用

设置在HTML元素对象前和后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。

因为如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素，这上对于实际内容来说其实是多余的，对自动分析网页的语义也可能会产生不好的影响。CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。

二、伪元素::before和::after简单使用

简而言之，伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。

 <p>
      <span>::before</span>
       This the main content.
      <span>:after</span>
 </p>

但是这些元素实际上并不在文档中生成。它们将在外部可见，但是你将不会在文档的源代码中找到它们，因此，实际上它们是“虚假”的元素。

2.1、代码片段将在引用的之前和之后分别添加添加一个引号
image.png
<style>
    blockquote::before {
        content: open-quote;
    }

    blockquote::after {
        content: close-quote;
    }
</style>

<blockquote>我是一个blockquote元素内的内容</blockquote>
2.2、给伪元素添加样式

尽管作为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。

image.png
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        margin: 100px;
    }
    blockquote {
        position: relative;
    }

    blockquote::before,blockquote::after {
        position: absolute;
        font-size: 50px;
        color: #fff;
        background: #ddd;
    }

    blockquote:before {
        content: open-quote;
    }

    blockquote:after {
        content: close-quote;
    }
</style>
<blockquote>我是一个blockquote元素内的内容</blockquote>
2.3、伪元素结合伪类使用

尽管有不同类型的伪X（伪元素、伪类），我们可以使用伪类连同伪元素一起放入一个CSS规则中，例如，如果我们希望当我们的鼠标移到blockqoute上时，引号字体颜色变成红色。

image.png
<style>

blockquote:hover::before {
    color: red;
}

blockquote:hover::after {
    color: red;
}

</style>

三、伪元素::before和::after实例：实现自定义checkbox效果

通过伪元素::before很简单的就实现了自定义checkbox效果。

自定义checkbox效果
<label for="checkbox1">
    <input id="checkbox1" type="checkbox">
    <span class="custom-radio"></span>
    <span>点击我</span>
</label>


* {
    padding: 0;
    margin:0;
}
body {
    margin: 200px;
}

label {
    cursor: pointer;
    
}

label input[type="checkbox"] {
    display: none;
}


label span[class="custom-radio"] {
    position: relative;
    display: inline-block;
    width:16px;
    height:16px;
    border: 1px solid #1e98d8;
    border-radius: 3px;
}

label span:last-child {
    display: inline-block;
    vertical-align: top;
}
label input[type="checkbox"]:checked + .custom-radio {
    background: #22aaec;
}
/*通过定义边框和transfrom翻转实现 √ 号效果*/
label input[type="checkbox"]:checked + .custom-radio::before {
    content: "";
    position: absolute;
    top:2px;
    left: 2px;
    display: inline-block;
    width: 10px;
    height: 6px;
    border: 2px solid #011b23;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}

上面的代码这样就可以自定义选中效果了。

四、伪元素::before和::after实例：简约聊天界面气泡效果

  • 实现了伪元素清除浮动。
  • 实现了聊天字体元素与头像对应的三角符号。
简约聊天界面气泡效果

下面代码主要看CSS代码最后的::before和::after的聊天气泡的实现。

<style>

* {
    padding: 0;
    margin: 0;
}

ol,ul {
    list-style: none;
}

/*tians: 浏览器窗口布局 start */

body {
    background: #eef0f5;
    height: 100%;
}
.page-container {
    max-width: 1000px;
    min-height: calc(100vh - 56px);
    margin: 0 auto;
}

.chat-wrap {
    position: absolute;
    top: 19px;
    bottom: 10px;
    width: 1160px;
    margin: 0 auto;
    overflow: hidden;
}

.chat-record {
    position: relative;
    box-sizing: border-box;
    width: 700px;
    height: 100%;
    margin-left: 300px;
    padding: 46px 0 152px;
    background-color: #fff;
}

/*tians: 浏览器窗口布局 end */


/*tians: 聊天窗口布局 start */

.chat-message {
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    padding-top: 25px;
    padding-bottom: 35px;
}
.chat-message li {
    margin-top:15px;
}
.chat-message .item-myself .figure,
.chat-message .item-friend .figure {
    width: 36px; 
}
.chat-message .item-friend .figure {
    float: left;
    margin-right: 10px;
}
.chat-message .item-myself .figure {
    float: right;
    margin-left: 10px;
}
.chat-message img {
    width:100%;
    height:100%;
}
.chat-message .item-myself .text,
.chat-message .item-friend .text {
    position: relative;
    background: #2db7f5;
    line-height: 30px;
    padding: 5px;
    border-radius: 5px;
    word-break: break-all;
    max-width: 200px;
    
}
.chat-message .item-friend .text {
    float: left;
    text-align: right;
}

.chat-message .item-myself .text {
    float: right;
    text-align: left;
}

/*tians: 聊天窗口布局 end */

/*tians: 聊天输入编辑器 start */

.chat-editer {
    position: relative;
    padding: 0 20px;
    border-top: 2px solid #f2f2f5;
}
.chat-input {
    height: 65px;
    border:1px solid #2db7f5;
    padding: 0 10px 0 5px;
    color: #000;
    outline: none; 
    overflow: auto;
}

/*tians: 聊天输入编辑器 end */

/*伪元素清楚浮动*/
.chat-record li:after {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    content: "";
}

/*利用伪元素实现聊天内容左侧三角*/
.chat-message .item-friend .text::before,
.chat-message .item-myself .text::after {
    content: '';
    position: absolute;
    top:5px;
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    vertical-align: baseline;
}
.chat-message .item-friend .text::before {
    border-right: 8px solid #2db7f5;
    left: -14px;
}
.chat-message .item-myself .text::after {
    border-left: 8px solid #2db7f5;
    right: -14px;
}

</style>
<!--HTML代码-->
<div id="contatiner">
    <div class="chat-container page-container">
        <div class="chat-wrap">
            <div class="chat-record">
                <!--聊天框-->
                <div class="chat-message">
                    <ul class="im-list">
                        <li class="item-friend">
                            <div class="figure">
                                <img src="https://img2.bosszhipin.com/boss/avatar/avatar_6.png">
                            </div>
                            <div class="text">你好</div>
                        </li>
                        <li class="item-myself">    
                            <div class="figure">
                                <img src="https://img2.bosszhipin.com/boss/avatar/avatar_15.png">
                            </div>
                            <div class="text">你好啊</div>
                        </li>
                    </ul>
                </div>
                <!--输入框-->
                <div class="chat-editor">
                    <div id="contentInput" contenteditable="true" class="chat-input"></div>
                </div>
            </div>
        </div>
    </div>
</div>
    <!--https://code.csdn.net/snippets/58211-->
<script src="../js/jquery.js"></script>
<script>
$(function () {

    $('#contentInput').focus();
    //插入聊天记录的模板
    function strTemplate(Inputcontent='',chatClass='item-myself',imgSuffix='15') {
        let str =
            `<li class="${chatClass}">
                <div class="figure">
                    <img src="https://img2.bosszhipin.com/boss/avatar/avatar_${imgSuffix}.png">
                </div>
                <div class="text">${Inputcontent}</div>
            </li>`
        return str;
    };

    //不能使用keyup,否则阻止不了默认回车事件
    $('#contentInput').keydown(function (event) {
        if (event.keyCode == 13 && !event.ctrlKey) {
            var $content = $('#contentInput').text();
            let myContent = strTemplate($content);
            if ($.trim($content)) {
                $('.im-list').append(myContent);
                $('#contentInput').text('');
                $('.chat-message').scrollTop($('.im-list').innerHeight());
            }
            event.preventDefault();
        }
    });
    
    //模仿朋友聊天
    setInterval(() => {
        let friendContent = strTemplate('真好！！！','item-friend','6');
        $('.im-list').append(friendContent);
        $('.chat-message').scrollTop($('.im-list').innerHeight());
    }, 1000 * 10);
});
</script>

本来只想简单的写一个聊天气泡的，没想到写着写着想加一些简单的功能玩玩。其实代码也不多。代码引用了Jquery库，有兴趣的可以复制在自己浏览器中试一试效果。

五、伪元素::before和::after和CSS3属性实例：实现图片堆叠效果。

好看的图片

首先实现这种效果，要分为以下步骤来做：

  1. 首先设置元素的大小和位置和元素样式。
  2. 设置::before伪元素
  3. 设置::after伪元素
  • html

<div class="stackone">
    <img src="../imgs/mhj2.jpg" alt="">
</div>
  • 设置图片元素大小和样式
.stackone {
    position: relative;
    float: left;
    width: 400px;
    height: 532px;
    margin: 50px;
    /*添加方框和阴影效果*/
    border: 6px solid #fff;
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

因为我们要获得画廊效果，所以我们将图像浮动到左边，并设置相当任意的50px边距，以便将它们很好地分隔开。高度和宽度设置为（532px X 400px）中使用的图像的尺寸。

设置为相对定位，稍后将对伪元素使用绝对定位，希望这些伪元素的位置与该元素“相关”，而不是整个页面。

  • 设置::before伪元素
.stackone::before {
    content: "";
    width: 400px;
    height: 532px;

    background: #eff4de;
    border: 6px solid #fff;

    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);

    position: absolute;
    z-index: -1;
    top: 0px;
    left: -10px;
}

我们要做的是让它看起来像我们现在的另一个图像。由于伪元素的大部分表面区域将被隐藏，所以我们可以简单地使用纯色。

我们的伪元素会干扰图像。为了解决这个问题，我们需要添加一些定位上下文，然后用z-index= -1将其推回到后面。

  • 设置::after伪元素
.stackone::after {
    content: "";
    width: 400px;
    height: 532px;
    background: #768590;
    border: 6px solid #fff;

    position: absolute;
    z-index: -1;
    top: 5px;
    left: 0px;

    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

将第三张照片添加到堆栈中，这和我们刚才所做的完全一样，所以没有必要详细地浏览它。主要区别将是不同的背景颜色、位置和旋转。

上面已经完成了第一个图像堆叠效果了。但是有CSS代码样式冗余的情况。我们需要优化一下。

  • 优化后的代码和图片效果（注：CSS属性省略了浏览器私有属性前缀）
好看的姑娘
<style>
* {
    padding: 0;
    margin: 0;
}

body {
    background: #ccd3d7;
}

div[class*='stack'] {
    position: relative;
    float: left;
    margin: 50px;   
}

div[class*='stack'] img {
    width:100%;
    height:100%;
}

div[class*='stack'],div[class*='stack']::before,div[class*='stack']::after {
    width: 400px;
    height: 532px;
    border: 6px solid #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

div[class*='stack']::before,div[class*='stack']::after {
    content: "";
    background: #768590;
    position: absolute;
    z-index: -1;
}

.stackone::before {
    top: 4px;
    left: -6px;
    background: #eff4de;
    transform: rotate(-5deg);
}
.stackone::after {
    top: -2px;
    left: -6px;
    transform: rotate(10deg);
}

.stacktwo::before {
    top: 5px;
    left: -15px;
    background: #eff4de;
    transform: rotate(-10deg);
}
.stacktwo::after {
    top: -2px;
    left: -10px;
    transform: rotate(-5deg);
}

</style>

<!--html代码-->
<div class="stackone">
    <img src="../imgs/mhj2.jpg" alt="">
</div>


<div class="stacktwo">
    <img src="../imgs/mhj3.jpg" alt="">
</div>

五、学习总结

我们可以通过伪元素实现各种很棒的效果。现在页面上好多CSS效果都是通过伪元素::before和::after来实现的。比如说：单选框样式效果、复选框样式效果、清除浮动效果、tip提示效果等。

六、参考链接：

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

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,400评论 1赞 45
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1赞 92
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,303评论 2赞 66
  • CSS伪类与伪元素完全指南
    本文转载自：众成翻译译者：为之漫笔链接：http://www.zcfy.cc/article/239原文：http...
    极乐君阅读 7,333评论 1赞 62
  • 一只蜘蛛的梦
    老院墙角的蜘蛛依旧在不停的织网。 我走过去，打算用树枝捅掉蜘蛛网，原因很简单：看着就烦。 于是，一个...
    飘渺孤魂影阅读 251评论 3赞 10