2019-09-03
JiangRen Mr
content
属性需要与before
及after
伪元素配合使用,作用是可以定义伪元素
所显示的内容,本文主要列举content
的可选值及实用的案例与技巧🎃
一个简单的例子:
<p>「不会写前端」</p>
复制代码
p {
&::before {
content: "欢迎关注"
}
&::after {
content: "微信公众号"
}
}
复制代码
浏览器显示的是这个亚子:
我们看看实际上在浏览器渲染的结构:
没错,就是这么粗暴,就跟他们的名字一样,一前一后😁
值得注意的是,在新的规范中,单冒号指伪类
、双冒号指伪元素
,就算你写成:after
,标准的浏览器还是会渲染成::after
,目的是兼容旧写法👍
unicode
attr
函数url
函数counter
函数css
变量为了使文章简洁,下面有部分content
属性在外层省略父元素:
// 原始
p {
&::after {
content: "";
}
}
// 省略后
content: "";
复制代码
content: "我是文字内容";
复制代码
浏览器自带的特殊字符:
p {
&:after {
content: "\02691";
color: red;
}
}
html特殊字符对照表
iconfont
自定义字体图标:
<span class="icon icon-close"></span>
复制代码
@font-face {
font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1209853_ok7e8ntkhr.ttf?t=1560857741304') format('truetype');
}
.icon {
font-family: "iconfont";
}
.icon-close::before {
content: "\e617";
}
复制代码
显示如下:
顾名思义,这个函数可以获取html
元素中某一属性的值,如id
、class
、style
等😍
<p data-content="我是文字内容"></p>
复制代码
content: attr(data-content);
复制代码
显示我的掘金头像:
content: url("https://user-gold-cdn.xitu.io/2019/8/7/16c681a0fb3e84c4?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1");
复制代码
显示如下:
counter
函数的作用是插入计数器的值,配合content
属性可以把计数器里的值显示出来🎲,介绍用法之前,得先熟悉两个属性counter-reset
跟counter-increment
😎
counter-reset
的作用是定义一个计数器:
counter-reset: count1 0; // 声明一个计数器count1,并从0开始计算
counter-reset: count2 1; // 声明一个计数器count2,并从1开始计算
counter-reset: count3 0 count4 0 count5 0; // 声明多个计数器
复制代码
counter-increment
使计数器的值递增,可以理解成javascript
中的+=
:
counter-reset: count 0;
counter-increment: count 2; // 使count自增2,当前count的值为2
counter-increment: count -2; // 使count自增-2,当前count的值为-2
复制代码
注意,这里的计数器count
的值为什么不是变回了0
,可以理解成样式覆盖,就如以下代码:
div {
width: 100px;
width: 200px; // 实际渲染的宽度
}
复制代码
显示变量的时候,如果变量是string
类型则可以直接显示,如果是int
类型,则需要借用counter
函数😒
// string类型
--name: "不会写前端";
p {
&::after {
content: var(--name); // 显示为"不会写前端"
}
}
---------- 我是分割线 ----------
// int类型
--count: 60;
p {
&::after {
counter-reset: color var(--count);
content: counter(count); // 显示为"60"
}
}
---------- 我是分割线 ----------
// 不支持的类型及情况
--count: 60.5; // 显示为"0",不支持小数
--count: 60px; // 显示为"",不支持css属性值
复制代码
普通字符串拼接:
content: "xxx" + "xxx";
复制代码
字符串拼接函数:
// 不能使用 + 连接符,也可以不需要空格,这里只是为了区分
content: "我支持" attr(xx);
count: "我的掘金头像:" url("xxxxx");
content: "计数器的值为:" counter(xx);
复制代码
隐性转换:
content: 0; // 显示为""
content: "" + 0; // 显示为"0"
content: "" + attr(name); // 显示为"attr(name)"
复制代码
href
属性里面的值:<a href="https://juejin.im/user/587e1822128fe1005706db1c"></a>
复制代码
a {
&:empty {
&::after {
content: "链接内容为:" attr(href);
}
}
}
复制代码
显示如下:
<ul>
<li>首页</li>
<li>商品</li>
<li>详情</li>
</ul>
复制代码
ul {
display: flex;
font-weight: bold;
li {
&:not(:last-child) {
margin-right: 5px;
&::after {
content: "\276D";
margin-left: 5px;
}
}
}
}
之前还这样写来着😂
<li v-for="(item, index) in list">
<span>{{item}}</span>
<span v-show="index < list.length - 1">、</span>
</li>
复制代码
<div class="progress" style="--percent: 14;"></div>
<div class="progress" style="--percent: 41;"></div>
<div class="progress" style="--percent: 94;"></div>
复制代码
.progress {
width: 400px;
height: 17px;
margin: 5px;
color: #fff;
background-color: #f1f1f1;
font-size: 12px;
&::before {
counter-reset: percent var(--percent);
content: counter(percent) "%"; // 文字显示
display: inline-block;
width: calc(100% * var(--percent) / 100); // 宽度计算
max-width: 100%; // 以防溢出
height: inherit;
text-align: right;
background-color: #2486ff;
}
}
加个过渡效果:
transition: width 1s ease; // 页面首次进入没有过渡效果,因为width必须要发生变化才行
鱼和熊掌不可兼得,如果只靠css
,想在页面首次进入触发动画效果,那只有animation
才能做到了😭
.progress {
&::before {
// 移除width跟transition属性
animation: progress 1s ease forwards;
}
@keyframes progress {
from {
width: 0;
}
to {
width: calc(100% * var(--percent) / 100);
}
}
}
参考文章:小tips: 如何借助content属性显示CSSvar变量值
<button data-tooltip="我是一段提示">按钮</button>
复制代码
[data-tooltip] {
position: relative;
&::after {
content: attr(data-tooltip); // 文字内容
display: none; // 默认隐藏
position: absolute;
// 漂浮在按钮上方并居中
bottom: calc(100% + 10px);
left: 50%;
transform: translate(-50%, 0);
padding: 5px;
border-radius: 4px;
color: #fff;
background-color: #313131;
white-space: nowrap;
z-index: 1;
}
// 鼠标移入button的时候显示tooltip
&:hover {
&::after {
display: block;
}
}
}
多方向、主题、动画实现可以移步我之前写过的一篇文章:利用css‘content实现指令式tooltip文字提示🤡
<form>
<input type="checkbox" id="one">
<label for="one">波霸奶茶</label>
<input type="checkbox" id="two">
<label for="two">烤奶</label>
<input type="checkbox" id="three">
<label for="three">咖啡</label>
<!-- 输入结果 -->
<div class="result">已选中:</div>
</form>
复制代码
form {
counter-reset: count 0;
// 当checkbox选中的时候,计数器自增1
input[type="checkbox"] {
&:checked {
counter-increment: count 1;
}
}
// 输出结果
.result {
&::after {
content: counter(count);
}
}
}
<!-- 章节 -->
<ul class="section">
<li>
<h1>自我介绍</h1>
<!-- 子章节 -->
<ul class="subsection">
<li>
<h2></h2>
</li>
<li>
<h2></h2>
</li>
</ul>
</li>
<li>
<h1>写一段css代码</h1>
</li>
</ul>
复制代码
// 章节
.section {
counter-reset: section 0; // 外层计数器
h1 {
&::before {
counter-increment: section 1; // 自增1
content: "Section"counter(section) ". ";
}
}
// 子章节
.subsection {
counter-reset: subsection 0; // 内层计数器
h2 {
&::before {
counter-increment: subsection 1; // 自增1
content: counter(section) "."counter(subsection); // 计数器是有作用域的,这里可以访问外层计数器
}
}
}
}
7. 加载中...动画
<p>加载中</p>
复制代码
p {
&::after {
content: ".";
animation: loading 2s ease infinite;
@keyframes loading {
33% {
content: "..";
}
66% {
content: "...";
}
}
}
}
<div class="no-more">无更多数据</div>
复制代码
.no-more {
&::before {
content: "——";
margin-right: 10px;
}
&::after {
content: "——";
margin-left: 10px;
}
}
复制代码
效果如下:
content
始终都需要配合before
跟after
伪元素使用,主要是显示一些额外
的信息,更多案例需要大家去挖掘,只要脑洞大👍,篇幅较长,如有内容或知识点出错,请大家纠正!
本文章转载自掘金。
IT Support 训练营01期
2025/11/10 06:13 (Sydney)
CCNA考证班01期
2025/09/06 08:37 (Sydney)
商业数据分析实战班第17期
2025/03/15 06:13 (Sydney)
地址
Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)Level 2, 171 La Trobe St, Melbourne VIC 3000四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号Business Hub, 155 Waymouth St, Adelaide SA 5000Disclaimer
JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.
匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议
© 2017-2024 JR Academy Pty Ltd. All rights reserved.
ABN 26621887572