前端

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

2018-09-28  本文已影响502人  侠客有情剑无情QAQ

一、伪元素::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伪元素

<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）中使用的图像的尺寸。

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

.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将其推回到后面。

.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代码样式冗余的情况。我们需要优化一下。

好看的姑娘 
<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提示效果等。

六、参考链接：

上一篇下一篇

猜你喜欢

热点阅读