介绍常用的伪元素。

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. Red Hat Enterprise Linux 8.0 安装

    Red Hat Enterprise Linux 8.0 安装 本次安装通过使用VMware Workstation 15 pro 进行. 1.新建虚拟机 2.点击首页的创建新的虚拟机,或者点击标签栏 ...

  2. deletefile 与KILL

    1.Kill 语句 从磁盘中删除文件.语法Kill pathname必要的 pathname 参数是用来指定一个文件名的字符串表达式.pathname 可以包含目录或文件夹.以及驱动器.说明在 Mic ...

  3. [ZJOI2007]最大半连通子图（Tarjan，拓扑序DP）

    [ZJOI2007]最大半连通子图 题目描述 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v ...

  4. Codeforces 960 二进制构造子序列 完全二叉树shift模拟 主席树/MAP DP

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  5. Python核心技术与实战——七|自定义函数

    我们前面用的代码都是比较简单的脚本,而实际工作中是没有人把整个一个功能从头写到尾按顺序堆到一块的.一个规范的值得借鉴的Python程序,除非代码量很少(10行20行左右)应该由多个函数组成,这样的代码 ...

  6. mysql—查询数据库表的数量

    1.查看数据库表数量SELECT count(TABLE_NAME) FROM information_schema.TABLES WHERE TABLE_SCHEMA='dbname';  2.获取 ...

  7. Bean的生命周期与JVM**

    案例: 在service里定义了一个全局变量,这类变量只能是final的.如果不是,在代码中一旦有地方给该变量进行业务赋值.当不满足赋值条件时变量仍然保留上次的赋值的值. 这是因为Bean没有销毁. ...

  8. RMI实现方案

  9. docker for windows 中挂载文件到容器

    docker for windows版本: 宿主机:windows10 场景: 容器是基于microsoft/donet的webapi 想把宿主机的文件挂载到容器中,比方说:a.txt 命令如下: d ...

  10. 解决报错:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized

    Cannot create PoolableConnectionFactory (The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized . ...