定义

伪元素选择器：就是有连续两个冒号的选择器，如::first-line::first- letter、::before 和::after

  1. E::first-letter文本的第一个单词或字（如中文、日文、 韩文等）
  2. E::first-line 文本第一行；
  3. E::selection 可改变选中文本的样式；
  4. E::before和E::after

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

          p::first-letter {  /* 选择第一个字 */

            color: red;

            font-size: 25px;

          }

          p::first-line {   /* 选择第一行 */

            color: green;

            font-size: 20px;

          }

          p::selection {  /*  选中变色 */

            color: blue;

          }

          div:before {    /* 放在盒子内部的前面 */

            content:"一只";

          }

          div:after {    /* 放在盒子内部的后面插入 */

            content:"猪";

          }

    </style>

</head>

<body>

    <h1>静夜思</h1>

    <p>床前明月光，疑是地上霜。举头望明月，低头思故乡</p>

    <div>特立独行的</div>

</body>

</html>

实现效果

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

  1. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  2. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  3. css中的伪元素，我今天记住了！o~yeah

    对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...

  4. css 中的伪类选择器before 与after

    .cf:after,.cf:before {content: " "; display: table;} .cf:after {clear: both;} :before是因为ta ...

  5. CSS_03_04_CSS伪元素选择器

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

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

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

  7. css伪元素选择器

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

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

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

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

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

随机推荐

  1. 前端面试题（4）JavaScript

    前端面试题JavaScript(一) JavaScript的组成 JavaScript 由以下三部分组成: ECMAScript(核心):JavaScript 语言基础 DOM(文档对象模型):规定了 ...

  2. Java数组重修，猜数小游戏改进和打印正三角形

    数组重修,猜数小游戏 要求:从键盘输入一个数,判断数组是否包含此数,运用随机数 我们可能会这样写 import java.util.Random; import java.util.Scanner; ...

  3. flask之数据库的交互

    一:关系型数据库 mysql Flask-SQLAlchemy管理关系型数据库. mysql数据库引擎:url : mysql://username:passowrd@hostname/databas ...

  4. springboot+thymeleaf 访问静态资源解决（static）

    ---------------------------------------2.1.3-------------------------------------------------------- ...

  5. tensorflow2 keras.Callback logs

    官方文档上表示logs内存的内容为 on_epoch_end: logs include `acc` and `loss`, and optionally include `val_loss` (if ...

  6. 退役——halfrot's life in OI

    这是一个没有人看的博客里丢了两年的坑,还有很多事应该做,但是我很懒,所以今天把它填了. 前记:和很多人的竞赛生涯一样,一开始我也是奋不顾身,奔月而去,然而身处弱校,没有人引导方向,再加上自己很蒻的主要 ...

  7. PHP RSA公私钥的理解和示例说明

    1.生成公钥和私钥 要应用RSA算法,必须先生成公钥和私钥,公钥和私钥的生成可以借助openssl工具.也可以用在线生成公私钥.(网站:http://web.chacuo.net/netrsakeyp ...

  8. C# 高性能 TCP 服务的多种实现方式Cowboy.Sockets

      本篇文章的主旨是使用 .NET/C# 实现 TCP 高性能服务的不同方式,包括但不限于如下内容: APM 方式,即 Asynchronous Programming Model TAP 方式,即 ...

  9. android7.0后对于file://的限制

    错误信息: 04-18 14:56:58.283  4440  4440 W System.err: android.os.FileUriExposedException: file:///stora ...

  10. Windows 下开启FTP服务并创建FTP用户

    Windows 下开启FTP服务,并创建用户 此教程教你怎么开启 Windows 的 FTP 服务,并创建用于登入 FTP 的用户.教程用到的操作系统是 Windows 7. 一.创建用于登入 FTP ...