昨天想写一个登陆网站，但是怎么都实现不了图片里+表单，搜索发现需要css的伪类元素帮助，特意学习
常见的伪类元素
在CSS中，:before和:after 是伪元素，它们可以用于在指定元素的内容之前或之后插入内容。这两个伪元素非常强大，常用于装饰性元素或者清除浮动等。
关于:before 和 :after的一些基本用法：
element::before {
/* CSS 属性 */
}
element::after {
/* CSS 属性 */
}
属性:content
这是:before 和 :after伪元素必须设置的属性，如果不设置这个属性，伪元素将不会显示。
content: ""; /* 必须有内容，即使是空字符串 */
- 添加装饰性内容
h1:before {
content: "【";
}
h1:after {
content: "】";
}
/*上面的代码会在每个<h1>元素的内容前后添加中括号*/
- 清除浮动
.clearfix::after {
content: "";
display: block;
clear: both;
}/*这个技巧常用于清除包含浮动子元素的父元素的浮动，以使其能够包含其浮动子元素。 */
explanation:
- 为什么要清除浮动？
在CSS布局中，浮动（float）是一个常用的属性，它可以使元素（通常是图片或者盒子）向左或向右移动，直到它的边缘碰到包含另一个浮动元素的边缘。
但是，浮动元素有一些特殊的行为：
1.浮动元素会脱离正常的文档流。
2.包含浮动元素的父元素不会自动伸展以包围它们。
这就导致了以下问题：
假设你有一个父元素，里面有几个子元素，这些子元素都被设置了浮动（比如float: left;）。因为浮动元素脱离了文档流，所以父元素的高度会塌陷，变为0。这意味着父元素不会扩展以包围其浮动的子元素。结果是，父元素之后的元素可能会向上移动，与浮动元素重叠。
- 怎样的代码?
.clearfix::after {
content: ""; /* 必须有内容，即使是空字符串 */
display: block; /* 使伪元素成为块级元素，这样可以清除浮动 */
clear: both; /* 清除左右两侧的浮动 */
}
这个技巧常用于清除包含浮动子元素的父元素的浮动，以使其能够包含其浮动子元素。
- 创建图形【使用:before 和 :after可以创建一些基本的图形，比如三角形：】
*{
margin: 0;
padding: 0;
background-color: antiquewhite;
}
.arrow {
position:relative; /*必要的，使伪元素相对于此元素定位 */
/* display: inline-block; 或者 block，确保元素可以包含伪元素
height: 0%; /* 设置元素的高度 */
width: 100%; /* 设置元素的宽度 */
/* 父级元素写长宽是为了调节位置 */
padding: 50px 2px; */
}
.arrow::after {
content: " "; /* 必须有内容 */
position: absolute;
/* 设置这个才可以让三角形动 */
left: 30%; /* 使伪元素的左侧与父元素的水平中心对齐 */
border-left: 300px solid transparent;
border-right: 250px solid transparent;
border-bottom: 600px solid #50e722ae;
/* 尖尖朝上【没有啥，朝啥】 */
}
注意事项
伪元素生成的内容是行内元素，可以用display属性改变其显示类型。
伪元素的content属性虽然可以包含字符串，但通常不建议用于包含大量内容，它们更适合装饰性内容。
伪元素虽然可以继承父元素的样式，但某些属性如margin、padding、border等默认为none。