在 CSS 中,和 是可以添加到选择器以创建伪元素的关键字。伪元素将插入到与选择器匹配的元素中,在选择器中的任何内容之前或之后。
// 页面
hello word
// 样式
.my_text::before {
content: '';
}
.my_text::after {
content: '';
}
先上效果图
废话不多说,直接上代码:
// 页面
=
// 样式
input:checked {
counter-increment: total;
}
output::before {
content: counter(total);
}
input {
position: absolute;
width: 1px;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap;
}
label {
display: grid;
place-items: center;
width: 50px;
height: 50px;
background-color: #fff;
overflow: hidden;
}
input:focus + label {
outline: 2px solid #406f99;
}
input:checked + label::before {
content: ' ';
}
body {
box-sizing: border-box;
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
color: #406f99;
background-color: #cbd9e6;
font: 700 2.5rem/1 'Fira Mono', monospace;
}
.wrapper {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 500px;
}
span, output {
height: 50px;
line-height: 50px;
}
// 页面
// 样式
p::before {
content:
url(https://assets.codepen.io/77020/8bit-mario.gif)' 'attr(data-lives);
}
body {
box-sizing: border-box;
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
color: #fff;
background-color: #000;
font: 2.25rem/1 'Press Start 2P', monospace;
}
// 页面
// 样式
p::before {
content: '';
animation: flip 2s linear infinite;
}
@keyframes flip {
from { content: 'Hello!'; }
to { content: 'Goodbye!'; }
}
body {
box-sizing: border-box;
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
color: #fe4365;
background-image: linear-gradient(45deg, #c5e0dc, #f9cdad);
font: 700 5rem/1 'Signika', sans-serif;
}
好了,分享到此结束!
页面更新:2024-04-26
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号