html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大
content屬性需要與before及after偽元素配合使用，作用是可以定義偽元素所顯示的內容，本文主要列舉content的可選值及實用的案例與技巧🎃
基本用法
一個簡單的例子：
「不會寫前端」
復制代碼p {
&::before {
content: "歡迎關注"
}
&::after {
content: "微信公眾號"
}
}
復制代碼
瀏覽器顯示的是這個亞子：
我們看看實際上在瀏覽器渲染的結構：
沒錯，就是這么粗暴，就跟他們的名字一樣，一前一后😁
值得注意的是，在新的規范中，單冒號指偽類、雙冒號指偽元素，就算你寫成:after，標準的瀏覽器還是會渲染成::after，目的是兼容舊寫法👍
可取的值普通字符
unicode
attr函數
url函數
counter函數
css變量
逐一使用
為了使文章簡潔，下面有部分content屬性在外層省略父元素：// 原始
p {
&::after {
content: "";
}
}
// 省略后
content: "";
復制代碼
1. 普通字符content: "我是文字內容";
復制代碼
2. unicode
瀏覽器自帶的特殊字符：
p {
&:after {
content: "\02691";
color: red;
}
}
復制代碼
顯示如下：
iconfont自定義字體圖標：
復制代碼@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";
}
復制代碼
顯示如下：
3. attr函數
顧名思義，這個函數可以獲取html元素中某一屬性的值，如id、class、style等😍
復制代碼content: attr(data-content);
復制代碼
4. url函數
顯示我的掘金頭像：content: url("https://user-gold-cdn.xitu.io/2019/8/7/16c681a0fb3e84c4?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1");
復制代碼
顯示如下：
缺點就是無法控制圖片的大小😂
5. counter函數
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; // 實際渲染的寬度
}
復制代碼
6. css變量
顯示變量的時候，如果變量是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)"
復制代碼
實用案例
1. 當a標簽內容為空時，顯示其href屬性里面的值：
復制代碼a {
&:empty {
&::after {
content: "鏈接內容為：" attr(href);
}
}
}
復制代碼
顯示如下：
2. 面包屑跟分隔符
- 首頁
- 商品
- 詳情
復制代碼ul {
display: flex;
font-weight: bold;
li {
&:not(:last-child) {
margin-right: 5px;
&::after {
content: "\276D";
margin-left: 5px;
}
}
}
}
復制代碼
顯示如下：
之前還這樣寫來著😂
{{item}}
、
復制代碼
3. 進度條
復制代碼.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);
}
}
}
復制代碼
頁面刷新后效果如下：
4. tooltip提示按鈕
復制代碼[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;
}
}
}
復制代碼
效果如下：
5. 計算checkbox選中的個數
波霸奶茶
烤奶
咖啡
已選中：復制代碼form {
counter-reset: count 0;
// 當checkbox選中的時候，計數器自增1
input[type="checkbox"] {
&:checked {
counter-increment: count 1;
}
}
// 輸出結果
.result {
&::after {
content: counter(count);
}
}
}
復制代碼
效果如下：
6. 給目錄加章節計數
自我介紹
寫一段css代碼
復制代碼// 章節
.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 {
&::after {
content: ".";
animation: loading 2s ease infinite;
@keyframes loading {
33% {
content: "..";
}
66% {
content: "...";
}
}
}
}
復制代碼
效果如下：
8. 無更多數據
無更多數據復制代碼.no-more {
&::before {
content: "——";
margin-right: 10px;
}
&::after {
content: "——";
margin-left: 10px;
}
}
復制代碼
效果如下：
總結
content始終都需要配合before跟after偽元素使用，主要是顯示一些額外的信息，更多案例需要大家去挖掘，只要腦洞大。
總結
以上是生活随笔為你收集整理的html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何在html中添加选择列表,html
- 下一篇： 本科学计算机研究生读哲学,计算机专业本科