介绍常用的伪元素。

after用得比较多的

first-letter

用于为文本的第一个首字母设置样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 设置第一个首字母的样式*/

        p:first-letter{

            color: red;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div>

        <p>我是一个段落</p>

    </div>

</body>

</html>

before

用于在元素的内容前面插入新内容

使用此伪元素选择器一定要结合content属性

在每个<p>元素之前插入内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 用于在元素的内容前面插入新内容*/

        p:before{

            content: 'mike';

            color: red;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div>

        <p>我是一个段落</p>

    </div>

</body>

</html>

after

用在网页布局比较多，清除浮动

用于在元素的内容后面插入新内容。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style type="text/css">

        /* 用于在元素的内容后面插入新内容*/

        p:after{

            content: '&';

            color: red;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div>

        <p>我是一个段落</p>

    </div>

</body>

</html>
在每个<p>元素之后插入内容

前端 CSS的选择器 伪元素选择器的更多相关文章

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

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

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

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

  3. CSS中的伪元素选择器

    定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...

  4. css 选择器 & UI元素的伪类选择器 & 伪元素选择器

    UI元素的伪类选择器 1. :focus  用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable  用来指定元素处于不可用时的状态    表单里应用 ...

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

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

  6. python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）

    11.3 css 11.31 基本选择器 11.311 id选择器 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html ...

  7. CSS_03_04_CSS伪元素选择器

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

  8. css伪元素选择器

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

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

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

随机推荐

  1. SQL SERVER BCP导入导出

    bcp是SQL Server中负责导入导出数据的一个命令行工具,它是基于DB-Library的,并且能以并行的方式高效地导入导出大批量的数据.bcp可以将数据库的表或视图直接导出,也能通过SELECT ...

  2. python3-访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个实例的na ...

  3. Django【第13篇】：Django之Form组件

    django 之知识点总结以及Form组件 一.model常用操作 1.13个API查询:all,filter,get ,values,values_list,distinct,order_by ,r ...

  4. SpringCloud学习系列-构建部门微服务消费者Module

    1.新建microservicecloud-consumer-dept-80 2.Pom <project xmlns="http://maven.apache.org/POM/4.0 ...

  5. 【NOIP2016提高组A组7.16】第三条跑道

    题目 数据范围 分析 时限5000ms. 我们注意到\(a_{i}初始值以及x小于等于600且非零\) 也就是说,\(a_{i}\)的质因数一定小于600,而600以内的质因数只有109个. 那么考虑 ...

  6. Codecombat 游戏攻略（计算机科学三）

    第二关 赋值运算符-=字符串拼串循环语句while // 你可以把字符串连起来,或者把数字连接到字符串. // 一起唱歌,使用字符串连接: // X potions of health on the ...

  7. Xcode 代码注释

    /** * 生成二维码 * * @param data 二维码数据 * @param size 二维码大小 * @param color 二维码颜色 * @param backgroundColor ...

  8. MIF文件生成说明

    mif文件就是存储器初始化文件,即memory initialization file,用来配置RAM或ROM中的数据.生成QuartusII11.0可用的mif文件,有如下几种方式: 方法1:利用Q ...

  9. Java语言基础(方法重载概述和基本使用)

    方法重载概述: 在同一个类中,允许存在一个以上的同名方法,只要他们的参数列表不同(即参数类型或者参数个数)即可. 方法重载特点: 1. 与返回值类型无关,只看方法名和参数列表 2. 在调用的时候,虚拟 ...

  10. 每隔2分钟，div元素顺序淡入

    我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个box有n个元素,这些元素顺序淡入,每隔2分钟,执行一次,代码开始: <div></div> <div>& ...