after                   :在内容后边

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>after</title>

<style type="text/css">

div {

    width: 300px;

    height: 100px;

    border: 1px solid #;

}

div::after {

    content: "我在内容的后面";

}

</style>

</head>

<body>

<div>伪元素fgdddddddddddddddddddddddddddddd</div>

</body>

</html>

content after

before                在内容的前面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>before</title>

<style type="text/css">

div {

    width: 300px;

    height: 100px;

    border: 1px solid #;

}

div::before {

    content: "我在内容的前面";

}

</style>

</head>

<body>

<div>伪元素</div>

</body>

</html>

content before

First-Lette           第一个字母

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>First-Letter</title>

<style type="text/css">

div {

    width: 500px;

    margin:  auto;

    font-size: 12px;

}

div::first-letter {

    color: #f00;

    font-size: 24px;

    font-weight: bold;

}

</style>

</head>

<body>

    <div>sssss</div>

</body>

</html>

First-Line          全部一行

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>First-Line</title>

<style type="text/css">

div {

    width: 500px;

    margin:  auto;

}

div::first-line {

    color: #f00;

    font-weight: bold;

}

</style>

</head>

<body>

<div>

    sssss<br>

    sssss<br>

    sssss<br>

</div>

</body>

</html>

first Line

::selection        选择颜色会变

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Selection</title>

<style type="text/css">

div::selection {

    background: red;

    color: pink;

}

</style>

</head>

<body>

<div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div>

</body>

</html>

css---6伪元素选择器的更多相关文章

  1. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

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

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

  3. css伪元素选择器

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

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

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

  5. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

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

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

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

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

  8. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  9. 前端 CSS的选择器 伪元素选择器

    介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...

  10. CSS中的伪元素选择器

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

随机推荐

  1. kafka相关业务必会操作命令整理

    参考:https://kafka.apache.org 服务相关命令 1.启动/停止zk > bin/zookeeper-server-start.sh config/zookeeper.pro ...

  2. leetcode.字符串.409最长回文串-Java

    1. 具体题目 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串.在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意: 假设 ...

  3. DNF游戏币拼团

    DNF游戏币拼团活动方案 活动目的: 通过拼团的方式来实现老拉新和现实新用户转换,可以通过有需求的用户来告知好友来进行用户裂变 活动时间:预计时间2018.11.11-2018.11.23 SLOGA ...

  4. python接口自动化（put请求）

    python接口自动化(put请求) 一.put请求的作用:更新资源 二.应用 导包:import requests 调用requests.put()方法 参数有URL.data.headers,方法 ...

  5. Linux 进程间通信 有名管道（fifo）

    有名管道特点: 1)无名管道只能用于具有亲缘关系的进程之间,这就限制了无名管道的使用范围 2)有名管道可以使互不相关的两个进程互相通信. 3)有名管道可以通过路径名来指出,并且在文件系统中可见,但内容 ...

  6. JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT

    取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用,停止计时器. 语法: clearTimeout(id_of_setTimeout) 参数说明: ...

  7. protobuf3的学习笔记

    学习protobuf的过程中踩了不少的坑,这篇博文算是一个小结吧! 环境: windows VisualStudio Google.Protobuf.Tools. Google.Protobuf. 其 ...

  8. 单源最短路径问题1 (Bellman-Ford算法)

    /*单源最短路径问题1 (Bellman-Ford算法)样例: 5 7 0 1 3 0 3 7 1 2 4 1 3 2 2 3 5 2 4 6 3 4 4 输出: [0, 3, 7, 5, 9] */ ...

  9. tesseract-ocr,tesseract,pytesseract在windows下怎么安装

    废话不多说,直接介绍如何下载安装tesseract-OCR以及pytesseract和PIL资源 文末百度网盘都有Tesseract是一个开源的OCR引擎,能识别100多种语言(中,英,韩,日,德,法 ...

  10. RDBMS关系型数据库与HBase的对比

    关系型数据库 结构: * 数据库以表的形式存在 * 支持FAT.NTFS.EXT.文件系统 * 使用Commit log存储日志 * 参考系统是坐标系统 * 使用主键(PK) * 支持分区 * 使用行 ...