僞元素的妙用

1. 使用自增功能實現列表序號

<ul class="sort-list">
  <li class="sort">元素列表</li>
  <li class="sort">元素列表</li>
  <li class="sort">元素列表</li>
  <li class="sort">元素列表</li>
  <li class="sort">元素列表</li>
</ul>
複製代碼

.sort-list {
  counter-reset: li;
  list-style-type: none;
}
.sort {
  color: #000;
  background: #ccc;
  margin-top: 14px;
  padding: 15px;
  opacity: .8;
  width: 300px;
}
.sort::before {
  content: counter(li)". ";
  counter-increment: li;
}
複製代碼

2. 使用after實現自動換行

<div class="poem">
  <span class="break-line">故人西辭黃鶴樓</span>
  <span class="break-line">煙花三月下揚州</span>
</div>
複製代碼

.break-line::after {
  content: "\A";
  white-space: pre;
}
複製代碼

3. 使用css的attr函數實現placeholder

<div class="input-text attr-placeholder" contenteditable="true" data-placeholder="請輸入文字"></div>
複製代碼

.input-text {
  width: 300px;
  padding: 10px;
  font-size: 20px;
  line-height: 1.4;
  border: 1px solid #ccc;
  outline: none;
}

.attr-placeholder:empty::before {
  content: attr(data-placeholder);
  color: #b2b2b2;
}
複製代碼

4. 使用僞元素實現背景圖片

<div class="fake-el-img"></div>
複製代碼

.fake-el-img::before {
  content: url('https://user-gold-cdn.xitu.io/2019/9/3/16cf654fcfd61673?w=533&h=300&f=jpeg&s=16052');
}
複製代碼

5. 使用僞元素擴大可點擊區域

<span class="btn">button</span>
複製代碼

.btn {
  font-size: 18px;
  font-family: Helvetica, Tahoma, Arial;
  line-height: 1em;   /*使用em做爲單位，即便字體變化，按鈕的總體樣式也會按比例跟隨變化*/
  color: #fff;
  background: linear-gradient(135deg,#fce,#cce);
  padding: .5em 1.5em;
  border-radius: 2em;
  display: inline-block;
  position: relative;
}

.btn::before {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
}
複製代碼

能夠根據本身想要添加的範圍，修改值，目前爲5px

博客地址 gitbook小冊