<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>68-伪元素选择器</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            width: 200px;

            height: 200px;

            background-color: red;

        }

        /*

        p{

            width: 50px;

            height: 50px;

            background-color: pink;

        }

        */

        div::before{

            content: "爱你";

            width: 50px;

            height: 50px;

            background-color: pink;

            display: block;

        }

        div::after{

            /*指定添加的子元素中存储的内容*/

            content: "么么哒";

            /*指定添加的子元素的宽度和高度*/

            width: 50px;

            /*height: 50px;*/

            /*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/

            height:0;

            background-color: pink;

            /*指定添加的子元素的显示模式*/

            display: block;

            /*隐藏添加的子元素*/

            visibility: hidden;

        }

    </style>

</head>

<body>

<!--

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

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

2.格式:

标签名称::before{

    属性名称:值;

}

给指定标签的内容前面添加一个子元素

标签名称::after{

    属性名称:值;

}

给指定标签的内容后面添加一个子元素

-->

<div>

    <!--<p>爱你</p>-->

    我是文字

    <!--<p>么么哒</p>-->

</div>

</body>

</html>

H5 68-伪元素选择器的更多相关文章

  1. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. CSS_03_04_CSS伪元素选择器

    第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...

  5. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  6. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  7. 前端-CSS-4-伪类选择器&伪元素选择器

    1.伪类选择器(爱恨原则) -------------------------------------------------------------------------------------- ...

  8. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  9. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  10. css 伪元素选择器

    /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...

随机推荐

  1. aspectj 简单的模拟权限检查、事务、日志记录

    package com.ij34.service; public class Hello { public void he() { System.out.println("执行Hello的h ...

  2. C#-循环语句（六）

    for循环 格式: for(表达式1;循环条件;表达式2) { 循环体; } 解释:先执行表达式1,再判断循环条件是否为真,如果为真则执行循环体,执行完成后再执行表达式2 再次判断循环条件,由此一直反 ...

  3. 穷举，迭代，while循环

    1. 2.大马驼2石粮食,中等马驼1石粮食,两头小马驼1石粮食,要用100匹马,驼100石粮食,该如何分配? 3. 4. 5. 6.

  4. shell编程 学好内功（一）

    shell 背景 什么是shell编程 高大上的解释,往往让人摸不住头脑.一句话概括就是:shell编程就是对一堆Linux命令的逻辑化处理. 为什么要会shell编程 举个简单的例子,我们做java ...

  5. php5.4新功能Traits

    php5.4新功能Traits介绍 1. traits Traits是在5.4中新增的一个用于实现代码重用的方法. php是一种单一继承的语言,我们无法像java一样在一个class中extends多 ...

  6. windows下安装consul

    Consul 是一个支持多数据中心分布式高可用的服务发现和配置共享的服务软件, 由 HashiCorp 公司用 Go 语言开发, 基于 Mozilla Public License 2.0 的协议进行 ...

  7. 聚类——KFCM

    聚类——认识KFCM算法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 一.KFCM概述 KFCM:基于核的改进的模糊c均值聚类算法.它是通过核函数将 ...

  8. webpack模块定义和使用的模式

    在使用webpack作为模块加载工具时,我在想module.exports的模块应该是一种什么模式,最直接地思考是单例.不太确定,所以写一个简单例子做测试. 测试代码 singleton.js: va ...

  9. 【车】汽车X40保养

    参考文档: [养车成本]小保养331元,奔腾X40养车成本调查

  10. 设计模式のFlyweight（享元模式）----结构模式

    一.产生背景 享元模式:它使用共享物件,用来尽可能减少内存使用量以及分享资讯给尽可能多的相似物件:它适合用于只是因重复而导致使用无法令人接受的大量内存的大量物件.通常物件中的部分状态是可以分享.常见做 ...