美文网首页
伪元素选择器

伪元素选择器

作者: 直到世界尽头_Leo | 来源:发表于2018-04-29 10:28 被阅读0次

1.什么是伪元素选择器?

作用:

  • 给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box::before{
            content: "“我是”";
            width: 50px;
            height: 50px;
            background: pink;
            display: block;
        }
        .box::after{
            content: "“yo”";
            width: 50px;
            height: 50px;
            background: pink;
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        leo
    </div>
</body>
</html>

相关文章

  • C3选择器

    属性选择器 兄弟选择器 伪类选择器 伪类target 伪元素before,after 其他伪元素

  • CSS3学习

    基础选择器 伪类&伪元素 选择器 伪元素选择器 属性选择器 状态伪类选择器 结构属性选择器 文字阴影&盒子阴影 文...

  • CSS的优先级

    内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素(类型)选择器 = 伪元素选择器

  • CSS选择器

    选择器类型 元素选择器 类选择器 ID 选择器 属性选择器 伪类 伪元素 选择器组 后代选择器 子元素选择器 相邻...

  • css3选择器,颜色,文本,盒模型

    属性选择器 03-伪类选择器01.html 伪元素before 和after 伪元素选择器first-letter...

  • jQuery之选择器

    基本选择器 层级选择器 简单伪类选择器 与内容相关的伪类选择器 与元素状态相关的伪类选择器 匹配子元素的伪类选择器...

  • CSS3 积累(2)之结构伪类选择器

    介绍 伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等,这篇主要讲讲什么是结构伪类...

  • CSS3新特性

    1.属性选择器 2.结构伪类选择器 3.伪元素选择器(重点) 伪元素选择器可以帮助我们利用CSS创建新标签元素,而...

  • CSS 理解

    选择器 通用选择器: id选择器 class选择器 元素选择器 子选择器 后代选择器 伪类选择器 伪元素选择器: ...

  • 十一,伪元素选择器

    一,区别:伪元素选择器:选择部分内容伪类选择器:选择元素整体二,伪元素选择器属性:(部分浏览器可以识别单冒号,比如...

网友评论

      本文标题:伪元素选择器

      本文链接:https://www.haomeiwen.com/subject/hsaglftx.html