整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來談談文本Content內容的基礎用法
1)).首行縮進文本
<div style='text-indent:2em'></div> 可以設置負數 也可使用百分數 像素2)).文本對齊方式
<div style='text-align:center'></div>
left 左邊
right 右邊
center 中間
justify 兩端對齊3)).字間距
<div style='word-spacing:2em'></div> 可以設置負數 也可使用百分數 像素4)).文本間距
<div style='letter-spacing:2em'></div> 可以設置負數 也可使用百分數 像素5)).文本轉換
<div style='text-transform:none'></div>
none 不轉換
uppercase 大寫
lowercase 小寫
capitalize 首字母大寫6)).文本修飾
<div style='text-decoration:none'></div>
none 不修飾
underline 下劃線
overline 上劃線
line-through 中劃線
blink 文本閃爍7)).文本空白符的處理
<div style='white-space:normal'></div>
pre-line 合并空白符序列，但是保留換行符
normal 忽略空白符
nowrap 文本不會換行，直到<br>出現才換行
pre 空白會被瀏覽器保留
pre-wrap 保留空白符序列，但是正常地進行換行8)).文本方向
<div style='direction:ltr'></div>
ltr 從左到右
rtl 從右到左
9)).文本行高
<div style='line-height:2'></div> 可使用百分數 像素
10)).文本陰影
<div style='text-shadow:1px 1px 1px red'></div>11)).字符換行
<div style='word-wrap:normal'></div>
normal 只在允許的斷字點換行
break-word 在長單詞、URL地址內部進行換行12)).處理溢出文本
<div style='text-overflow:ellipsis'></div>
clip 修剪文本
ellipsis 省略符號來代表被修剪的文本
string 使用給定的字符串來代表被修剪的文本13)).文本輪廓
<div style='text-outline:1px 1px red'></div>14)).文本換行
<div style='text-wrap:none'></div>
normal 只在允許的換行點進行換行。
none 不換行。元素無法容納的文本會溢出
unrestricted 在任意兩個字符間換行。
suppress 壓縮元素中的換行。瀏覽器只在行中沒有其它有效換行點時進行換行。這篇文章主要介紹了CSS樣式更改篇中的文本Content基本設置，希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲？請轉發分享給更多的人****
IT共享之家
入群請在微信后臺回復【入群】
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/
例
以下示例將在每個鏈接后的括號內加上網址：
a:after
{
content: " (" attr(href) ")";
}
屬性定義及使用說明
ontent 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。
| 默認值： | normal |
|---|---|
| 繼承： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.content="url(beep.wav)" |
瀏覽器支持
所有主流瀏覽器都支持Content屬性。
注意： IE8只有指定!DOCTYPE才支持Content屬性。
Content屬性值
| 值 | 說明 |
|---|---|
| none | 設置Content，如果指定成Nothing |
| normal | 設置content，如果指定的話，正常，默認是"none"（該是nothing） |
| counter | 設定計數器內容 |
| attr(attribute) | 設置Content作為選擇器的屬性之一。 |
| string | 設置Content到你指定的文本 |
| open-quote | 設置Content是開口引號 |
| close-quote | 設置Content是閉合引號 |
| no-open-quote | 如果指定，移除內容的開始引號 |
| no-close-quote | 如果指定，移除內容的閉合引號 |
| url(url) | 設置某種媒體（圖像，聲音，視頻等內容） |
| inherit | 指定的content屬性的值，應該從父元素繼承 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
CSS 偽元素基礎知識：before 與after （一），筆者已經介紹過 CSS 里的::before 和::after 這兩個偽元素，以及content 相關的用法，這篇將針對content 搭配counter (計數器) 進行一些有趣的應用，相信熟練之后搞不好能做出很好玩的內容。
在CSS里頭，counter是個很有意思的功能，最常見得就是如果我們使用list清單，樣式選擇decimal十進制，當清單內容變多的時候數字也會隨著遞增，底層貌似就是使用counter的原理，也因為counter 所產生的數值并不實際存在于網頁的元素內，所以如果我們要在清單元素之外使用，就必須透過::before 或::after的content來實現。
counter最的基本用法一定要有一個父元素和子元素(類似list的原理，比如使用ul包著li )，所以頁面布局會類似下面這段html：
<div> <span>鋼鐵俠</span> <span>美國隊長</span> <span>雷神索爾</span> </div>
在CSS里頭，先針對div父元素使用counter-reset:num;進行計數器初始化的設置，里面num是計數器累以數值計算的設置，接著可以在span::before里面看到counter-increment:num;這一段，這段的作用是把num累加上去，預設數值為加1，接著就通過content這個屬性顯示出來。
計數器預設的顯示語法為：counter(計數器名稱, list-style-type)
div{
counter-reset:num;
}
span{
display:block;
}
span::before{
counter-increment:num;
content:counter(num) '. ';
}
通過指定一開始counter-reset 的起始計數值，還有counter-increment累加的遞增數值（步長），還可以指定從某個數值開始計數。
div{
counter-reset:num 3;
}
span{
display:block;
}
span::before{
counter-increment:num 2;
content:counter(num) '. ';
}
如果要更換數字的樣式，也可以透過計數器的第二個設定值list-style-type來更改，下面的例子就是將樣式更改為georgian。
div{
counter-reset:num;
}
span{
display:block;
}
span::before{
counter-increment:num;
content:counter(num, georgian) '. ';
}
除了指定單一個變數外，counter 也可以同時指定多個變數，例如下面這段HTML，有三個類別在里面，我分別用span、i 和b 來分類。
<div> <span>鋼鐵俠</span> <span>美國隊長</span> <span>雷神索爾</span> <i>神盾局</i> <i>神鬼局</i> <i>神經局</i> <b>九頭蛇</b> <b>九頭牛</b> <b>九頭豬</b> </div>
CSS一開始counter-reset可以指定多個計數器，通過一個空白字符進行分隔，如果空白字符后面跟著數字則是起始值，沒有數字預設為1，當這樣設定之后，就可以看到不同類別的數字代號就不同。
div{
counter-reset:num numi 2 numb 5;
}
span, i, b{
display:block;
}
span::before{
counter-increment:num;
content:counter(num) '. ';
}
i::before{
counter-increment:numi 2;
content:counter(numi) '. ';
}
b::before{
counter-increment:numb 5;
content:counter(numb) '. ';
}
如果遇到了層級結構（目錄結構），需要一層層的展開( 例如：1 > 1.1 > 1.1.1 )，采用上述的作法可能就會復雜許多，好在counter 還提供了另外一個counters 的功能，目的就是來解決層級結構的麻煩事，在開始前可以先看看通過ul和li組合的清單布局結構：
<ul> <li>第一層 <ul> <li>第二層 <ul> <li>第三層</li> <li>第三層</li> <li>第三層</li> </ul> </li> <li>第二層</li> <li>第二層</li> </ul> </li> <li>第一層</li> <ul> <li>第二層</li> <li>第二層</li> </ul> </ul>
傳統的清單如果將list-style設為decimal，同樣可以具備數字連續的功能，但相對來說要做一些特殊變化就辦不到了。
li{
list-style:decimal;
}
通過content 和counters 的搭配，我們就可以告別預設值的困擾，甚至可以在不使用清單ul 和li 的狀況下，實現和清單一模一樣的效果，舉例來說，我們純粹通過div 模擬一個清單的布局( 仍然必須是有父元素和子元素的概念)，里面的樣式b 就等于是ul，樣式a 就等于是li：
<div class="a">第一層 <div class="b"> <div class="a">第二層 <div class="b"> <div class="a">第三層</div> <div class="a">第三層</div> <div class="a">第三層</div> </div> </div> <div class="a">第二層</div> <div class="a">第二層</div> </div> </div> <div class="a">第一層 <div class="b"> <div class="a">第二層</div> <div class="a">第二層</div> </div> </div>
由于b的外層沒有東西，所以一開始要把body 和b 都進行counter reset 的動作，接著通過counters 的使用，讓計數器的數值可以一個接著一個放進去，如此一來就可以做到原本清單不容易實現的效果了。
counters 使用語法：counters(計數器名稱, 分隔符, list-style-type)
body, .b{
counter-reset:c;
}
.a::before{
content:counters(c, ".") "：";
counter-increment:c;
}
div{
margin-left:10px;
}
了解原理之后，通過::before 和::after 的交互應用，就可以做出頗具特色的清單效果。
body, .b{
counter-reset:c;
}
.a{
box-sizing:border-box;
position:relative;
line-height:40px;
}
.a .a{
padding-left:30px;
}
.a::after{
content:'';
box-sizing:border-box;
display:inline-block;
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:40px;
margin-left:30px;
box-shadow:inset 0 2px #666;
background:#eee;
}
.a::before{
content:counter(c, upper-roman);
counter-increment:c;
display:inline-block;
width:30px;
height:40px;
background:#666;
color:#fff;
text-align:center;
margin-right:5px;
}
文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-2.html
原文作者：oxxostudio
由于網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，并在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正
原本網頁里面使用的清單列表展示，如果要進行樣式的修改、或是一些編號的設置，往往都要通過JavaScript來實現，如果熟練了counter的用法，搞不好純粹使用CSS 就能取代掉大部分JavaScript也說不定呢，更多的驚喜有待你的發現。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
