如何避免CSS -before、-after 中文亂

如何避免CSS :before、:after 中文亂碼

文轉(zhuǎn)載自：https://blog.csdn.net/hongyu799/article/details/109114843

問題背景：

在進(jìn)行頁面開發(fā)時(shí)，經(jīng)常會(huì)使用:before, :after偽元素創(chuàng)建一些小tips，但是在:before或:after的content屬性使用中文的話，會(huì)導(dǎo)致某些瀏覽器上出現(xiàn)亂碼。

解決方案：

避免在CSS的:before, :after中使用中文，如果一定要使用，可以使用中文對(duì)應(yīng)的Unicode。可以使用使用站長工具，或者是JavaScript的原生方法escape將中文轉(zhuǎn)為Unicode。

需要注意的是Unicode在CSS中的書寫方式，例如“小時(shí)”對(duì)應(yīng)的Unicode是'\u5c0f\u65f6'，而在CSS中要寫成（去掉里面的u，切記切記）

ss3中出現(xiàn)了 ":before",":after"偽類，

你可以這樣寫：

h1:after{

content:'h1后插入的文本';

...}

這兩個(gè)選擇器的作用以及效果，這里就不在介紹了；主要說一下上面提到的一個(gè)css屬性【content】用來和:after及:before偽元素一起使用，在對(duì)象前或后顯示內(nèi)容。

content的取值：

normal：默認(rèn)值。表現(xiàn)與none值相同

none：不生成任何值。<attr>：插入標(biāo)簽屬性值<url>：使用指定的絕對(duì)或相對(duì)地址插入一個(gè)外部資源（圖像，聲頻，視頻或?yàn)g覽器支持的其他任何資源）<string>：插入字符串

counter(name)：使用已命名的計(jì)數(shù)器

counter(name,list-style-type)：使用已命名的計(jì)數(shù)器并遵從指定的list-style-type屬性

counters(name,string)：使用所有已命名的計(jì)數(shù)器

counters(name,string,list-style-type)：使用所有已命名的計(jì)數(shù)器并遵從指定的list-style-type屬性

no-close-quote：并不插入quotes屬性的后標(biāo)記。但增加其嵌套級(jí)別

no-open-quote：并不插入quotes屬性的前標(biāo)記。但減少其嵌套級(jí)別

close-quote：插入quotes屬性的后標(biāo)記

open-quote：插入quotes屬性的前標(biāo)記

這里比較不好理解的取值就是：counter(name)這些；

下面主要總結(jié)一下這塊，最后會(huì)給出各個(gè)取值的demo，

比如我有如下html結(jié)構(gòu)：

<ul>

<li>這個(gè)是有序列表</li>

<li>這個(gè)是有序列表</li></ul>

我要在每個(gè)li的后面加上當(dāng)前l(fā)i【index】值：

ul li{

counter-increment:index;

}

ul li:after{

content:'統(tǒng)計(jì)：'counter(index);

display:block;

line-height:35px;

}

解釋：

count(name)這里的name，必須要提前指定好，否則所有的值都將是0；

count(name,list-style-type)這里的list-style-type就是css中l(wèi)ist-style-type屬性的取值；

下面給出完整DEMO

<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><meta name="author" content="phpstudy.net"><meta name="copyright" content="www.phpstudy.net"><style>

.string p:after {

margin-left: -16px;

background: #fff;

content: "支持";

color: #f00;}

.attr p:after {

content: attr(title);}

.url p:before {

content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);

display: block;}

.test ol {

margin: 16px 0;

padding: 0;

list-style: none;}

.counter1 li {

counter-increment: testname;}

.counter1 li:before {

content: counter(testname)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter2 li {

counter-increment: testname2;}

.counter2 li:before {

content: counter(testname2,lower-roman)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter3 ol ol {

margin: 0 0 0 28px;}

.counter3 li {

padding: 2px 0;

counter-increment: testname3;}

.counter3 li:before {

content: counter(testname3,float)":";

color: #f00;

font-family: georgia,serif,sans-serif;}

.counter3 li li {

counter-increment: testname4;}

.counter3 li li:before {

content: counter(testname3,decimal)"."counter(testname4,decimal)":";}

.counter3 li li li {

counter-increment: testname5;}

.counter3 li li li:before {

content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";}</style></head><body><ul>

<li>

string：

你的瀏覽器是否支持content屬性：否

</li>

<li>

attr：

</li>

<li>

url()：

如果你看到我的頭像圖片則說明你目前使用的瀏覽器支持content屬性

</li>

<li>

counter(name)：

<ol>

<li>列表項(xiàng)</li>

</ol>

</li>

<li>

counter(name,list-style-type)：

<ol>

<li>列表項(xiàng)</li>

</ol>

</li>

<li>

counter(name)拓展應(yīng)用：

<ol>

<li>列表項(xiàng)

<ol>

<li>列表項(xiàng)

<ol>

<li>列表項(xiàng)</li>

</ol>

</li>

<li>列表項(xiàng)</li>

</ol>

</li>

<li>列表項(xiàng)

<ol>

<li>列表項(xiàng)</li>

</ol>

</li>

<li>列表項(xiàng)

<ol>

<li>列表項(xiàng)</li>

</ol>

</li>

</ol>

</li></ul></body></html>

SS中的偽類真是個(gè)神奇的東西，有時(shí)要實(shí)現(xiàn)某些布局的時(shí)候菜鳥都是div套div，實(shí)在不行上flex，而高手一般都是用最少的元素來實(shí)現(xiàn)效果，比如巧妙的運(yùn)用偽類來達(dá)到目的的同時(shí)減少元素節(jié)點(diǎn)，代碼清爽了很多不用再寫一坨div。

這不，最近學(xué)習(xí)了幾招偽類的使用，特此記錄下。

列表最后一行左對(duì)齊

flex布局中，最后一行個(gè)數(shù)不滿的情況：

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}

最后一行不足4個(gè)：

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

解決思路有很多，這里我只說一種方式：使用偽類動(dòng)態(tài)計(jì)算最后一個(gè)元素的margin。比如每行有4個(gè)元素，最后一行只有3個(gè)，就計(jì)算最后一個(gè)的margin-right為“元素寬度+間隔大小”，若只有2個(gè)，則margin-right為”2個(gè)元素寬度+2個(gè)間隔大小”，以此類推，代碼如下：

.container {
    display: flex;
    /* 兩端對(duì)齊 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3個(gè)元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2個(gè)元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

效果：

黃色部分為動(dòng)態(tài)計(jì)算的margin，上面代碼最重要的就是.list:last-child:nth-child(4n - 1)，騷操作，頭一次見，稍微解釋下：

.list:last-child:nth-child(4n - 1)：說明最后一個(gè)同時(shí)也是4n-1個(gè)，就是要么第3個(gè)元素，要么第7個(gè)元素…
.list:last-child:nth-child(4n - 2)：說明最后一個(gè)同時(shí)也是4n-2個(gè)，就是要么第2個(gè)元素，要么第6個(gè)元素…

文本狀態(tài)的切換

元素的展開和收起也是會(huì)經(jīng)常遇到的，默認(rèn)收起狀態(tài)，點(diǎn)擊后就會(huì)展開，類似于點(diǎn)擊彈出下拉菜單，只涉及到兩種狀態(tài)，也可以結(jié)合偽類實(shí)現(xiàn)：

.btn::after {
  content: '展開'
}

#exp {
  display: none;
}

#exp:checked+.btn::after {
  content: '收起'
}

html如下：

<div class="wrap">
  <input type="checkbox" id="exp">
  <label class="btn" for="exp"></label>
</div>

效果：

這里巧妙地借助:checked偽類實(shí)現(xiàn)狀態(tài)的切換，換做javascript就要寫好幾行代碼。

生成箭頭

.arrow-button {
  position: relative;
  width: 180px;
  height: 64px;
  background: #f49714;
}

.arrow-button::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 64px;
  top: 0;
  right: -32px;
  background:
    linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
    linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position: 0 bottom, 0 top;
}

效果：

根據(jù)文本長度自動(dòng)調(diào)整字體大小

這個(gè)就很極客了，先看看效果：

這個(gè)是先效果的背后和第一個(gè)例子一樣使用了偽類級(jí)聯(lián)，同一個(gè)選擇器上使用多個(gè)偽類，核心代碼如下：

.box span {
    font-size: 40px;    
}
.box span:first-child:nth-last-child(n+13),
.box span:first-child:nth-last-child(n+13) ~ span {
    font-size: 30px;    
}
.box span:first-child:nth-last-child(n+17),
.box span:first-child:nth-last-child(n+17) ~ span {
    font-size: 20px;    
}
.box span:first-child:nth-last-child(n+25),
.box span:first-child:nth-last-child(n+25) ~ span {
    font-size: 14px;    
}

通過使用偽類級(jí)聯(lián)能控制不同字符個(gè)數(shù)的樣式。

能實(shí)現(xiàn)的效果還有很多，很多我也不會(huì)。。。

就我自己在開發(fā)時(shí)，很容易就把偽類這個(gè)東西拋之腦后了，下意識(shí)地習(xí)慣直接div一把梭，實(shí)現(xiàn)不了就用javascript，因?yàn)檫@種下意思的習(xí)慣成本很低，不要多加思考。其實(shí)有時(shí)候仔細(xì)想想，很多情況真的沒必要“殺雞用牛刀”，習(xí)慣也是有代價(jià)的，下意識(shí)的使用方式看起來似乎成本很低，但代碼因此變得復(fù)雜，增加了后期的維護(hù)成本和理解成本。不光是我們?cè)诰幋a的時(shí)候，生活中也是如此，遇到問題不妨多思考，不要急于作出反饋。

參考

http://www.zhangxinxu.com/wordpress/?p=1514

https://www.zhangxinxu.com/wordpress/?p=8540

https://segmentfault.com/a/1190000040030723

在線咨詢

上一篇：威脅Xin解析 - 隱藏在HTML中的QAKBOT銀
下一篇：一段驚呆下巴的 JavaScript 代碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何避免CSS -before、-after 中文亂

列表最后一行左對(duì)齊

文本狀態(tài)的切換

生成箭頭

根據(jù)文本長度自動(dòng)調(diào)整字體大小

參考

您的項(xiàng)目需求