css伪元素简介（常用）
站长
· 阅读数 40
在前端项目中，编写css的时候或多或少会接触到伪元素的使用，比如说使用伪元素::before编写必填校验前红色的*。可能会有小伙伴会有想到:hover、:active等伪类，这两者长的比较像，但是是有区别的。
一、伪类
伪类是用来定义元素特殊状态的，他可以用来设置鼠标悬停样式、元素获取焦点样式、设置链接样式等。如常见的 hover、active、link 等都是伪类。
二、伪元素
伪元素也称为伪对象，它不存在于 DOM 文档中、是一个虚拟的元素。它可以用来代表某个元素的子元素，但是这个子元素并不存在于文档树中。
三、如何区分伪类和伪元素
伪类和伪元素的根本区别在于：是否创造了新的元素。
在 W3C 中，对伪类和伪元素的描述是这样的：伪类用于向某些选择器添加特殊的效果，而伪元素用于将特殊效果添加到某些选择器中，也就是说伪元素是对那些不能通过 class 或 id 等选择元素的补充。
四、伪元素使用
本文主要是针对伪元素进行的讲解，伪类就不在此不展开赘述，接下来将对常见伪元素的使用进行示例说明。
4.1 ::before
创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
示例：
代码：
<div class="example-before">伪元素before示例1</div>
.example-before{
line-height: 20px;
padding-left: 8px;
position: relative;
}
.example-before::before {
position: absolute;
width: 3px;
height: 20px;
background: #1993ff;
content: "";
left: 0px;
}
4.2 ::after
用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
示例：
代码：
<div class="example-after">伪元素after示例</div><input type="text">
.example-after {
display: inline-block;
}
.example-after::after {
content: "*" ;
color: #f56c6c ;
margin-left: 4px ;
width: 6px;
font-size: 14px;
transform: translateY(2px);
}
4.3 ::first-letter
会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。
示例：
代码：
<div>为文本首字母添加样式</div>
div::first-letter {
font-size:30px;
color: #1993ff;
}
4.4 ::first-line
在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
示例：
代码：
<div>为文本首行添加样式，只作用于块级作用域</div>
div {
width: 150px;
}
div::first-line {
font-size:30px;
color: #1993ff;
}
4.5 ::marker
选中一个 list item 的 marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上，例如
示例：
代码：
<li>这是一句话</li><li>这是一句话</li>
<li>这是一句话</li><li>这是一句话</li>
<li>这是一句话</li><li>这是一句话</li>
body {
padding: 24px;
counter-reset: listItem
}li {
counter-increment: listItem;
}
li::marker {
content: "序号" counter(listItem) ":";
}
4.6 ::placeholder
以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。
示例：
代码：
<input type="text" placeholder="占位">
input::placeholder{
color: #1993ff;
}
4.7 ::selection
伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
示例：
代码：
<div>为文本被选中部分添加样式,仅支持颜色下划线阴影等</div>
div::selection {
color: #1993ff;
/* color
background-color
cursor
caret-color
outline
text-decoration
text-emphasis-color
text-shadow */
}
五、酷炫效果
5.1 双边丝带
示例（参考：juejin.cn/post/685457…
代码：
<div class="bilateral-ribbon">
<div class="bilateral-ribbon-title"><span>距离元旦还有24天</span></div>
</div>
body {
padding: 48px;
}
.bilateral-ribbon-title {
position: relative;
display: inline-block;
}
.bilateral-ribbon-title span {
position: relative;
z-index: 2;
display: inline-block;
padding: 0 15px;
height: 32px;
line-height: 32px;
background-color: #dc5947;
color: #fff;
font-size: 16px;
box-shadow: 0 10px 6px -9px rgba(0, 0, 0, 0.6);
}
.bilateral-ribbon-title span::before,.bilateral-ribbon-title span::after {
position: absolute;
bottom: -6px;
border-width: 3px 5px;
border-style: solid;
content: "";
}
.bilateral-ribbon-title span::before {
left: 0;
border-color: #972f22 #972f22 transparent transparent;
}
.bilateral-ribbon-title span::after {
right: 0;
border-color: #972f22 transparent transparent #972f22;
}
.bilateral-ribbon-title::before,.bilateral-ribbon-title::after {
position: absolute;
top: 6px;
content: "";
border-style: solid;
border-color: #dc5947;
}
.bilateral-ribbon-title::before {
left: -32px;
border-width: 16px 26px 16px 16px;
border-left-color: transparent;
}
.bilateral-ribbon-title::after {
right: -32px;
border-width: 16px 16px 16px 26px;
border-right-color: transparent;
}
5.2 铜钱
示例（参考：wow.techbrood.com/fiddle/3486…
代码：
<div class='coin'>
<div class='front jump'>
<div class='star'></div>
<span class='currency'>$</span>
<div class='shapes'>
<div class='shape_l'></div>
<div class='shape_r'></div>
<span class='top'>عظمى</span>
<span class='bottom'>عملة</span>
</div>
</div>
<div class='shadow'></div>
</div>
body {
margin: 0;
background: #262626;
}
span {
font-family: "Montserrat", sans-serif;
}
.jump {
animation: jump 1.5s infinite ease;
}
@keyframes jump {
0% {
top: 0;
}
50% {
top: -40px;
}
100% {
top: 0;
}
}
.coin {
margin: auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
height: 150px;
width: 150px;
}
.coin .front {
position: absolute;
height: 150px;
width: 150px;
background: #ffbd0b;
border-radius: 50%;
border-top: 7px solid #ffd84c;
border-left: 7px solid #ffd84c;
border-right: 7px solid #d57e08;
border-bottom: 7px solid #d57e08;
transform: rotate(44deg);
}
.coin .front:before {
content: "";
margin: 35.5px 35.5px;
position: absolute;
width: 70px;
height: 70px;
background: #f0a608;
border-radius: 50%;
border-bottom: 5px solid #ffd84c;
border-right: 5px solid #ffd84c;
border-left: 5px solid #d57e08;
border-top: 5px solid #d57e08;
z-index: 2;
}
.coin .front .currency {
overflow: hidden;
position: absolute;
color: #ffbd0b;
font-size: 40px;
transform: rotate(-44deg);
line-height: 3.7;
width: 100%;
height: 100%;
text-align: center;
text-shadow: 0 3px 0 #cb7407;
z-index: 3;
border-radius: 50%;
}
.coin .front .currency:after {
content: "";
position: absolute;
height: 200px;
width: 40px;
margin: 20px -65px;
box-shadow: 50px -23px 0 -10px rgba(255, 255, 255, 0.22), 85px -10px 0 -16px rgba(255, 255, 255, 0.19);
transform: rotate(-50deg);
animation: shine 1.5s infinite ease;
}
@keyframes shine {
0% {
margin: 20px -65px;
}
50% {
margin: 70px -85px;
}
100% {
margin: 20px -65px;
}
}
.coin .front .shapes {
transform: rotate(-44deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.coin .front .shapes div {
width: 20px;
height: 4px;
background: #d57e08;
border-top: 2px solid #c47207;
margin: 75px 7px;
}
.coin .front .shapes div:before {
content: "";
position: absolute;
width: 20px;
height: 4px;
background: #d57e08;
border-top: 2px solid #c47207;
margin: -10px 0;
}
.coin .front .shapes div:after {
content: "";
position: absolute;
width: 20px;
height: 4px;
background: #d57e08;
border-top: 2px solid #c47207;
margin: 8px 0;
}
.coin .front .shape_l {
float: left;
}
.coin .front .shape_r {
float: right;
}
.coin .front .top {
font-size: 30px;
color: #d67f08;
text-align: center;
width: 100%;
position: absolute;
left: 0;
}
.coin .front .bottom{
font-size: 30px;
color: #d67f08;
text-align: center;
width: 100%;
position: absolute;
left: 0; bottom: 0;
}
.coin .shadow {
width: 100%;
height: 20px;
background: rgba(0, 0, 0, 0.4);
left: 0;
bottom: -50px;
border-radius: 50%;
z-index: -1;
margin: 185px 7px 0 7px;
animation: swift 1.5s infinite ease;
}
@keyframes swift {
0% {
opacity: 0.8;
}
50% {
opacity: 0.4;
transform: scale(0.8);
}
100% {
opacity: 0.8;
}
}
Time！（参考资料：developer.mozilla.org/zh-CN/docs/…）
转载自:https://juejin.cn/post/7174703614387028029