摘要：伪元素在元素之前添加内容。注意及以前的使用方法是，规定的是，为防止兼容性的问题，建议使用。该伪元素针对行内元素。以为例，添加的内容也是在中。
before 伪元素在元素之前添加内容。
::after伪元素在元素之后添加内容。
注意：
CSS2及以前的使用方法是a:before，CSS3规定的是a::before，为防止兼容性的问题，建议使用a::before。
该伪元素针对行内元素。以a:before为例，添加的内容也是在中。
应用举例：使用一个
实现思路如下：
首先定义一个中心为页面中心的150*150的div标签，然后利用before与after伪元素向div标签中添加一个横向与一个纵向的红色矩形
实现代码如下：
html:
css:
.jia{
position:absolute;
width:150px; height:150px;
top:50%; left:50%;
margin-left:-75px; margin-top:-75px;
}
.jia::before,.jia::after{
position:absolute;
background-color:red;
content:""
}
.jia::before{
width:150px;
height:50px;
top:50px;
}
.jia::after{
width:50px;
height:150px;
left:50px;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49563.html
摘要：前端知识点总结复杂选择器兄弟选择器兄弟元素具备相同父元素的平级元素之间称为兄弟元素。 前端知识点总结——C3 1.复杂选择器 1.兄弟选择器 兄弟元素：具备相同父元素的平级元素之间称为兄弟元素。 1.相邻兄弟选择器 作用：获取紧紧挨在某元素后的兄弟元素 语法：选择器1+选择器2{} 注意：兄弟选择器，只能向后找，不能向前找 2.通用兄弟选择器 作用：获取...
相关内容：什么是css选择器标签选择器类选择器id选择器并集选择器（分组选择器）交集选择器后代选择器子标签选择器属性选择器相邻兄弟选择器伪类选择器伪元素选择器（伪对象选择器）首发时间：2018-03-02 修改：2018-04-30：修改了排版，增加了伪类选择器，伪元素选择器，在原本简略的介绍的基础上增加了描述并修改了某些术语描述。2018-05-05：修改了部分伪类选择器的注解，由于之前发生了小...
摘要：通用选择器组合子和否定伪类对特异性没有影响。选择器大部分还是和选择器保持了一致，但是有以下一些部分的改动第一个元素最后一个元素所有偶数元素，索引值从开始，第一个元素是偶数，第二个元素是奇数，以此类推。 选择器 在书写样式和查找节点的时候，选择器是必不可少的，所以了解选择器的书写方式和使用就显得极为重要，本文主要分开讲了css选择器和jQuery选择器； css选择器 大家都可能知道，在...
知道吗？Vue.js 有 2 个版本，一个是Runtime + Compiler版本，另一个是Runtime only版本。Runtime + Compiler版本是包含编译代码的，简单来说就是Runtime only版本不包含编译代码的，在运行时候，需要借助 webpack 的 vue-loader 事先把模板编译成 render 函数。 假如在你需要在客户端编译模板 (比如传入一个字符串...
阅读 1185·2021-11-15 11:37
阅读 2210·2021-09-30 09:55
阅读 4315·2021-09-22 15:51
阅读 3689·2021-09-22 15:46
阅读 2742·2019-08-30 15:52
阅读 399·2019-08-29 16:20
阅读 2784·2019-08-29 15:12
阅读 1098·2019-08-26 18:27
