文章目录

• 前言
• 一、::before
• 二、::after
• 三、::first-letter
• 四、::selection
• 总结

---

前言

回来看下伪元素.
CSS3要求使用双冒号来表示伪元素了.

---

一、::before

before初始位置于元素左上(但并不是紧贴左上,有一段很小的距离);

初始无大小(加颜色也看不见).由于具备行内元素特质(默认displal:inline),直接添加尺寸无效,但可以使用css的content属性向其内部添加内容(不能解析HTML)以使其具备大小:

要更加精确美观的规定尺寸,还是要设法施予其块级元素特质:

可以选择使用绝对定位,在规定其位置的同时也让尺寸能被规定,我更推荐这种方法.
当然,直接display:block也是一种办法.

        .box::before {
            position: absolute;
            top: 0;
            left: 0;
            /* display: block;*/
            content: "<div style='height:50px;width:40px;'></div>";
            width: 20px;
            height: 20px;
            background-color:skyblue;
            border-top: 2px solid #4feff5;
            border-left: 2px solid #4feff5;
        }

但,无论你使用何种方法转变其为块级,请务必保留content属性,否则无论给何种尺寸都将无法显示.

---

二、::after

before初始位置也位于元素左上(对,我没说错)但也不是紧贴左上,有一段很小的距离.

        .box::after {
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #4feff5;
            border-right: 2px solid #4feff5;
        }

其他特性同::before;

---

你可以用他们来给元素镶嵌上一些小玩意儿,就像这样:

这可以节省两个DOM节点,也不用多写这两个小东西的代码了.

---

三、::first-letter

对第一个文字所占有的区域进行样式规划;

.text::first-letter {
            color: rgb(27, 245, 216);
            background-color: grey;
        }

<p class="text">访问量已破万,感谢大家一年来的支持...</p>

---

四、::selection

规定遭到拖拽选取的元素,文字的样式,比如规定受选文字的底色vv;

p::selection {
            background-color: #24ffedf5;
        }

---

总结

复习一下伪元素~
如果这篇文章对你有帮助,我很高兴