html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大
content屬性需要與before及after偽元素配合使用，作用是可以定義偽元素所顯示的內(nèi)容，本文主要列舉content的可選值及實用的案例與技巧🎃
基本用法
一個簡單的例子：
「不會寫前端」
復(fù)制代碼p {
&::before {
content: "歡迎關(guān)注"
}
&::after {
content: "微信公眾號"
}
}
復(fù)制代碼
瀏覽器顯示的是這個亞子：
我們看看實際上在瀏覽器渲染的結(jié)構(gòu)：
沒錯，就是這么粗暴，就跟他們的名字一樣，一前一后😁
值得注意的是，在新的規(guī)范中，單冒號指偽類、雙冒號指偽元素，就算你寫成:after，標(biāo)準的瀏覽器還是會渲染成::after，目的是兼容舊寫法👍
可取的值普通字符
unicode
attr函數(shù)
url函數(shù)
counter函數(shù)
css變量
逐一使用
為了使文章簡潔，下面有部分content屬性在外層省略父元素：// 原始
p {
&::after {
content: "";
}
}
// 省略后
content: "";
復(fù)制代碼
1. 普通字符content: "我是文字內(nèi)容";
復(fù)制代碼
2. unicode
瀏覽器自帶的特殊字符：
p {
&:after {
content: "\02691";
color: red;
}
}
復(fù)制代碼
顯示如下：
iconfont自定義字體圖標(biāo)：
復(fù)制代碼@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";
}
復(fù)制代碼
顯示如下：
3. attr函數(shù)
顧名思義，這個函數(shù)可以獲取html元素中某一屬性的值，如id、class、style等😍
復(fù)制代碼content: attr(data-content);
復(fù)制代碼
4. url函數(shù)
顯示我的掘金頭像：content: url("https://user-gold-cdn.xitu.io/2019/8/7/16c681a0fb3e84c4?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1");
復(fù)制代碼
顯示如下：
缺點就是無法控制圖片的大小😂
5. counter函數(shù)
counter函數(shù)的作用是插入計數(shù)器的值，配合content屬性可以把計數(shù)器里的值顯示出來🎲，介紹用法之前，得先熟悉兩個屬性counter-reset跟counter-increment😎
counter-reset的作用是定義一個計數(shù)器：counter-reset: count1 0; // 聲明一個計數(shù)器count1，并從0開始計算
counter-reset: count2 1; // 聲明一個計數(shù)器count2，并從1開始計算
counter-reset: count3 0 count4 0 count5 0; // 聲明多個計數(shù)器
復(fù)制代碼
counter-increment使計數(shù)器的值遞增，可以理解成javascript中的+=：counter-reset: count 0;
counter-increment: count 2; // 使count自增2，當(dāng)前count的值為2
counter-increment: count -2; // 使count自增-2，當(dāng)前count的值為-2
復(fù)制代碼
注意，這里的計數(shù)器count的值為什么不是變回了0，可以理解成樣式覆蓋，就如以下代碼：div {
width: 100px;
width: 200px; // 實際渲染的寬度
}
復(fù)制代碼
6. css變量
顯示變量的時候，如果變量是string類型則可以直接顯示，如果是int類型，則需要借用counter函數(shù)😒// 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"，不支持小數(shù)
--count: 60px; // 顯示為""，不支持css屬性值
復(fù)制代碼
拼接
普通字符串拼接：content: "xxx" + "xxx";
復(fù)制代碼
字符串拼接函數(shù)：// 不能使用 + 連接符，也可以不需要空格，這里只是為了區(qū)分
content: "我支持" attr(xx);
count: "我的掘金頭像：" url("xxxxx");
content: "計數(shù)器的值為：" counter(xx);
復(fù)制代碼
隱性轉(zhuǎn)換：content: 0; // 顯示為""
content: "" + 0; // 顯示為"0"
content: "" + attr(name); // 顯示為"attr(name)"
復(fù)制代碼
實用案例
1. 當(dāng)a標(biāo)簽內(nèi)容為空時，顯示其href屬性里面的值：
復(fù)制代碼a {
&:empty {
&::after {
content: "鏈接內(nèi)容為：" attr(href);
}
}
}
復(fù)制代碼
顯示如下：
2. 面包屑跟分隔符
- 首頁
- 商品
- 詳情
復(fù)制代碼ul {
display: flex;
font-weight: bold;
li {
&:not(:last-child) {
margin-right: 5px;
&::after {
content: "\276D";
margin-left: 5px;
}
}
}
}
復(fù)制代碼
顯示如下：
之前還這樣寫來著😂
{{item}}
、
復(fù)制代碼
3. 進度條
復(fù)制代碼.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;
}
}
復(fù)制代碼
顯示如下：
加個過渡效果：transition: width 1s ease; // 頁面首次進入沒有過渡效果，因為width必須要發(fā)生變化才行
復(fù)制代碼
魚和熊掌不可兼得，如果只靠css，想在頁面首次進入觸發(fā)動畫效果，那只有animation才能做到了😭.progress {
&::before {
// 移除width跟transition屬性
animation: progress 1s ease forwards;
}
@keyframes progress {
from {
width: 0;
}
to {
width: calc(100% * var(--percent) / 100);
}
}
}
復(fù)制代碼
頁面刷新后效果如下：
4. tooltip提示按鈕
復(fù)制代碼[data-tooltip] {
position: relative;
&::after {
content: attr(data-tooltip); // 文字內(nèi)容
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;
}
// 鼠標(biāo)移入button的時候顯示tooltip
&:hover {
&::after {
display: block;
}
}
}
復(fù)制代碼
效果如下：
5. 計算checkbox選中的個數(shù)
波霸奶茶
烤奶
咖啡
已選中：復(fù)制代碼form {
counter-reset: count 0;
// 當(dāng)checkbox選中的時候，計數(shù)器自增1
input[type="checkbox"] {
&:checked {
counter-increment: count 1;
}
}
// 輸出結(jié)果
.result {
&::after {
content: counter(count);
}
}
}
復(fù)制代碼
效果如下：
6. 給目錄加章節(jié)計數(shù)
自我介紹
寫一段css代碼
復(fù)制代碼// 章節(jié)
.section {
counter-reset: section 0; // 外層計數(shù)器
h1 {
&::before {
counter-increment: section 1; // 自增1
content: "Section"counter(section) ". ";
}
}
// 子章節(jié)
.subsection {
counter-reset: subsection 0; // 內(nèi)層計數(shù)器
h2 {
&::before {
counter-increment: subsection 1; // 自增1
content: counter(section) "."counter(subsection); // 計數(shù)器是有作用域的，這里可以訪問外層計數(shù)器
}
}
}
}
復(fù)制代碼
顯示如下：
7. 加載中...動畫
加載中
復(fù)制代碼p {
&::after {
content: ".";
animation: loading 2s ease infinite;
@keyframes loading {
33% {
content: "..";
}
66% {
content: "...";
}
}
}
}
復(fù)制代碼
效果如下：
8. 無更多數(shù)據(jù)
無更多數(shù)據(jù)復(fù)制代碼.no-more {
&::before {
content: "——";
margin-right: 10px;
}
&::after {
content: "——";
margin-left: 10px;
}
}
復(fù)制代碼
效果如下：
總結(jié)
content始終都需要配合before跟after偽元素使用，主要是顯示一些額外的信息，更多案例需要大家去挖掘，只要腦洞大。
總結(jié)
以上是生活随笔為你收集整理的html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何在html中添加选择列表,html
- 下一篇： 本科学计算机研究生读哲学,计算机专业本科