css伪类元素初识

昨天想写一个登陆网站，但是怎么都实现不了图片里+表单，搜索发现需要css的伪类元素帮助，特意学习

常见的伪类元素

在CSS中，:before和:after 是伪元素，它们可以用于在指定元素的内容之前或之后插入内容。这两个伪元素非常强大，常用于装饰性元素或者清除浮动等。

关于:before 和 :after的一些基本用法：

element::before {
  /* CSS 属性 */
}

element::after {
  /* CSS 属性 */
}

属性:content

这是:before 和 :after伪元素必须设置的属性，如果不设置这个属性，伪元素将不会显示。

  content: "";  /* 必须有内容，即使是空字符串 */

1. 添加装饰性内容

 h1:before {
  content: "【";
}
h1:after {
  content: "】";
}
/*上面的代码会在每个<h1>元素的内容前后添加中括号*/

2. 清除浮动

   .clearfix::after {
    content: "";
    display: block;
    clear: both;
}/*这个技巧常用于清除包含浮动子元素的父元素的浮动，以使其能够包含其浮动子元素。 */

explanation:
- 为什么要清除浮动？
在CSS布局中，浮动（float）是一个常用的属性，它可以使元素（通常是图片或者盒子）向左或向右移动，直到它的边缘碰到包含另一个浮动元素的边缘。
但是，浮动元素有一些特殊的行为：
1.浮动元素会脱离正常的文档流。
2.包含浮动元素的父元素不会自动伸展以包围它们。
这就导致了以下问题：
假设你有一个父元素，里面有几个子元素，这些子元素都被设置了浮动（比如float: left;）。因为浮动元素脱离了文档流，所以父元素的高度会塌陷，变为0。这意味着父元素不会扩展以包围其浮动的子元素。结果是，父元素之后的元素可能会向上移动，与浮动元素重叠。
- 怎样的代码?

.clearfix::after {
  content: "";  /* 必须有内容，即使是空字符串 */
  display: block; /* 使伪元素成为块级元素，这样可以清除浮动 */
  clear: both; /* 清除左右两侧的浮动 */
}

这个技巧常用于清除包含浮动子元素的父元素的浮动，以使其能够包含其浮动子元素。

1. 创建图形【使用: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。