css---before和after伪元素

1.什么是伪元素

伪元素不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用如页面元素一样的CSS样式,表面上看上去貌似是页面的某些元素来展现,实际上CSS样式展现的行为,因此被称为伪元素。

注意:1.伪元素:before和:after添加的内容默认是行内元素(加宽高无效,需要调整为行内块或者块级元素),两个伪元素的content属性,表示伪元素的内容,设置before和after时必须设置其content属性,否则伪元素不起作用。

2.伪元素不占位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
 
	<style type="text/css">
	div::before {
		content: "我是BEFORE,";
		background-color: green;
		width: 100px; /*行内元素不生效的*/
		height: 100px;		
		/*类选择、伪类选择器 就是选区对象
		伪元素选择器,本质上是插入一具元素(标签 盒子),只不过是行内元素;*/
	}
	div::after {
		content: "我是AFTER,";
		background-color: red;
		display: block; /*转成块元素*/
		width: 100px;
		height: 100px;
		/*类选择、伪类选择器 就是选区对象
		伪元素选择器,本质上是插入一具元素(标签 盒子),只不过是行内元素;*/
	}	
	</style>
</head>
<body>
	<div>我是BODY</div>
</body>
</html>

效果:

2.伪元素的应用

1.装饰标题

2.清除浮动

3.下拉框的小角标

相关推荐

  1. 元素::before :: after的用法?

    2024-07-10 23:54:07       3 阅读
  2. css元素 :: before的用法

    2024-07-10 23:54:07       5 阅读
  3. css元素类的区别

    2024-07-10 23:54:07       41 阅读
  4. css元素选择器

    2024-07-10 23:54:07       12 阅读
  5. css3 中的元素

    2024-07-10 23:54:07       3 阅读

最近更新

  1. Python利用psutil库进行监控进程和资源

    2024-07-10 23:54:07       0 阅读
  2. SpringBoot RestHighLevelClient 按版本更新

    2024-07-10 23:54:07       0 阅读
  3. 跨域问题几种解决方法

    2024-07-10 23:54:07       0 阅读
  4. Python面试整理-文件处理

    2024-07-10 23:54:07       0 阅读
  5. 分式

    2024-07-10 23:54:07       0 阅读
  6. Spring WebFlux 介绍与效果演示示例

    2024-07-10 23:54:07       0 阅读
  7. django 需要修改的文件

    2024-07-10 23:54:07       0 阅读
  8. Random,ThreadLocalRandom,SecureRandom有什么区别

    2024-07-10 23:54:07       0 阅读
  9. Python 爬虫技术 第05节 异常处理

    2024-07-10 23:54:07       0 阅读

热门阅读

  1. 华为OD机试(C卷,200分)- 字符串拼接、田忌赛马

    2024-07-10 23:54:07       5 阅读
  2. 如何设置PHP wkhtmltopdf

    2024-07-10 23:54:07       6 阅读
  3. yolov5中训练长条型目标召回率低问题

    2024-07-10 23:54:07       8 阅读
  4. openssl error:0A000126:SSL routines:ssl3_read_n:unexpected eof

    2024-07-10 23:54:07       9 阅读
  5. 各种软件启动方式

    2024-07-10 23:54:07       6 阅读
  6. 【创作纪念日】我的三周年创作纪念日

    2024-07-10 23:54:07       7 阅读
  7. Github 2024-07-07 开源项目日报 Top10

    2024-07-10 23:54:07       8 阅读