CSS3积累（3）伪元素

作者: 有一条大鱼 | 来源:发表于2019-03-05 16:42 被阅读0次

::before 和 :after中双冒号和单冒号有什么区别？
伪元素和伪类问题
CSS3积累（3）伪元素
认识css3伪元素
::before和::after伪元素的用法
巧用伪元素和伪类让我们的html结构更清晰合理
CSS 布局
伪类和伪元素初探
CSS笔记15：结构伪类CSS3
css垂直居中的几种实现方式

什么是伪元素？

CSS 伪元素用于向某些选择器设置特殊效果。

选择器	功能描述
::first-letter	向文本的第一个字母添加特殊样式。
::first-line	向文本的首行添加特殊样式。
::before	在元素之前添加内容。
::after	在元素之后添加内容。

代码

<html>  
    <head>  
        <title>CSS学习之路</title>  
        <meta http-equiv="Content-Type" content="text/html;" />
        <meta charset="UTF-8">
        <meta name="keywords" content="css 笔记" />  
        <meta name="description" content="shaoyuli的CSS3积累笔记" /> 
        <style type="text/css">
            .demo {
                border: 1px solid #ccc;
                width: 300px;
                margin: 50px auto;
                padding: 10px;
            }
            /* css3之前写一个冒号即可生效，但css3时需要与伪类进行区别所以一般写两个冒号
            因此写一个冒号和两个冒号都可以生效。工作中推荐写两个冒号 */
            .demo::first-letter {
                font-size: 40px;
                font-weight: bold;
                /* 首字下沉 */
                float: left
            }
            .demo::first-line {
                color: #f00;
            }
            .demo1 {
                width: 300px;
                border: 1px solid #ccc;
                margin: 10px auto;
                padding: 10px;
                text-align: center;
            }
            .demo1::before {
                content: url(./download.jpeg);
                display: block;
            }
            .demo1::after {
                content: url(./download.jpeg);
                display: block;
            }
        </style>
    </head> 
    <body> 
        <div class="demo">
            最近，在我遇到这样一个人后，我的想法改变了。我和两个已成年的女儿一起去了一家咖啡厅。但这家咖啡厅挤满了吵闹的人群，所以我们不得不爬上陡峭的楼梯才找到了空桌。在享用过咖啡和点心之后，我们走在陡峭的楼梯上准备下楼，在那样狭窄的空间里只能供一个人上下楼，几乎没有任何空间可以让另一个人爬上去或下来。
        </div>
        <div class="demo1">
            学习CSS3
        </div>
    </body> 
</html>

P.S. 在使用before或after伪元素时，content属性必写，即使为空。