1. :before和 :after

CSS中的:befor、:after都会创建一个伪元素,其中:befor创建的伪元素是所选元素的第一个子元素,:after创建的伪元素是所选元素的最后一个子元素。

:befor、:after创建的伪元素**默认样式为内联样式**。

(1)`注意:CSS3引入了 ::(两个冒号)是用来区分伪类(:一个冒号)和伪元素(::两个冒号)。

  • 伪类:操作元素本身,如 :hover、:first-child、:focus等等。
  • 伪元素:操作元素的子元素,如 ::before、::after、::content等等。

(2)content属性

content 属性表示伪元素填充的内容。

css部分:

.a {width: 100px;height: 100px;margin-left: 20px;background-color: #eee;
}
.a::before {content: "♥";color: red;
}
.a::after {content: "♥";color: blue;
}

html部分:

<div class="a">
"hello"
</div>

CSS中的:before和 :after相关推荐

  1. css中float用法

    文档流:浏览器根据元素在html文档中出现的顺序,从左向右,从上到下依次排列.       浮动属性是CSS中的定位属性,用法如下:         float: 浮动方向(left.right.no ...

  2. 关于css中float的一切

    原文:http://css-tricks.com/all-about-floats/  这篇文章说的简单易懂 float是CSS中关于定位的属性. float有4个值:none, left, righ ...

  3. html如何给文字添加阴影效果,css中怎么给字体添加阴影效果

    css中可以使用text-shadow属性给字体添加阴影效果,text-shadow是CSS样式属性单词,是设置对象中文本的文字字体是否有阴影及模糊效果的CSS样式. text-shadow属性的语法 ...

  4. css中绝对定位中的left和top属性

    <html><head><title>Absolute Position</title><style type = "text/css& ...

  5. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  6. CSS中background-position属性

    CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...

  7. css在兼容模式下无法引用_如何在CSS中使用深色模式

    css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...

  8. web前端培训:CSS中单行文本溢出显示省略号的方法

    CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...

  9. 在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://www.qianyunlai.com/post-2.html 以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很 ...

  10. CSS中浮动布局float(小米布局案例、导航栏案例、overflow)

    1. CSS 布局的三种机制 网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...

最新文章

  1. spring boot初学习的数据库依赖
  2. 数字证书应用综合揭秘(包括证书生成、加密、解密、签名、验签)
  3. C语言不使用结构体实现链表,不用指针链表和结构体数组怎么编学生成绩管理系统啊...
  4. 微信公众平台两种消息处理流程对比
  5. USB查看器 USB Device Tree Viewer(UsbTreeView.exe)的使用(重启Intel Realsense摄像头)
  6. python3 next_对Python 3.2 迭代器的next函数实例讲解
  7. 每天一道LeetCode-----找到由连续数字组成的数组中缺失的那个连续值
  8. Label 表达式绑定
  9. 红黑树的删除_红黑树
  10. 基于Linux CentOS搭建FTP服务
  11. 51Nod-1384 全排列【全排列】
  12. PowerShell批量配置VM端点
  13. 移动网优大神VoLTE学习笔记(五):被叫信令流程
  14. python kdj指标详解_Python版简单的KDJ策略
  15. Sublime txt文本编辑器快捷方式简介
  16. 《人在囧途》- 我30岁了,转行学编程可以吗?
  17. 怎么修改图片到规定的大小?怎么改变图片KB大小?
  18. Control Egress TCP Traffic
  19. bzoj3123【SDOI2013】森林
  20. 简单教学管理系统画E-R关系图

热门文章

  1. 用c语言绘制数学函数图像,用c语言画数学函数图像.DOC
  2. VMware安装虚拟机详细教程
  3. java时间格式化与格式
  4. objective-c delegate
  5. 计算机教改论文发在那家核心期刊,教改类文章容易发的核心期刊有哪些
  6. [元带你学NVMe协议] NVME 2.0 新技术解决了什么痛点? 会带来哪些变革?
  7. Set集合的使用和知识点
  8. µTorrent中只使用ipv6连接
  9. 关于Java中的引用的用法
  10. Java--文件(File)