老規(guī)矩，還是先說(shuō)說(shuō)業(yè)務(wù)場(chǎng)景：有一個(gè)圖片列表，可以添加、刪除和更改，其中呢刪除時(shí)設(shè)計(jì)給的設(shè)計(jì)稿時(shí)懸?。╤over）在圖片上時(shí)顯示刪除的圖標(biāo)，所以就有了這個(gè)用before實(shí)現(xiàn)icon的場(chǎng)景
進(jìn)入正文，首先我們有一張圖片（這里我就用了一個(gè)隨機(jī)200x200px的api）：

<img src="https://source.unsplash.com/200x200" />

然后我們?cè)俚桨⒗锇桶褪噶繄D標(biāo)庫(kù)找到一張刪除的圖標(biāo)（我這里找了一個(gè)上傳到了一個(gè)免費(fèi)的圖床上），接著我們用偽類把圖標(biāo)顯示出來(lái)，值得注意的是由于img標(biāo)簽被認(rèn)定為沒(méi)有文本內(nèi)容的標(biāo)簽，所以在給img添加偽類是無(wú)效的，所以我們需要在img外層添加一個(gè)容器，那么代碼就變成下面這樣了：

<div class="image-wrapper">
  <img src="https://source.unsplash.com/200x200" />
</div>

讓我們加上偽類部分的內(nèi)容：

.image-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.image-wrapper::before {
  content: "";
  width: 100%;
  height: 30%;
  position: absolute;
  display: block;
  bottom: 0;
  /* 圖片來(lái)自阿里巴巴矢量圖標(biāo)庫(kù)，僅作為學(xué)習(xí)用途，如有侵權(quán)，請(qǐng)聯(lián)系刪除 */
  background: url("https://z3.ax1x.com/2021/08/25/heU6sg.png") no-repeat
    rgba(0, 0, 0, 0.6) center/1rem 1rem;
}

下面說(shuō)一下需要注意的點(diǎn)：

• 偽類必須要有content（conten可以為空字符串），沒(méi)有content的偽類元素是不會(huì)顯示的；
• content為空字符串時(shí)，偽類如果不設(shè)置display: block或者inline-block是不會(huì)顯示的，因?yàn)閭晤惐旧頃r(shí)inline元素，設(shè)置width和height都是無(wú)效的；
• absolute布局是相對(duì)于最近的一個(gè)非static布局的元素，如果沒(méi)有就會(huì)一直向上找，直到body，所以我們需要將image-wrapper設(shè)置為position: relative，這樣圖標(biāo)才會(huì)相對(duì)于圖片定位；

最后結(jié)合上hover，加上一個(gè)過(guò)渡動(dòng)畫(huà)，改變一下指針的樣式：

.image-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  cursor: pointer;
}

.image-wrapper::before {
  content: "";
  width: 100%;
  height: 30%;
  display: block;
  position: absolute;
  bottom: 0;
  /* 圖片來(lái)自阿里巴巴矢量圖標(biāo)庫(kù)，僅作為學(xué)習(xí)用途，如有侵權(quán)，請(qǐng)聯(lián)系刪除 */
  background: url("https://z3.ax1x.com/2021/08/25/heU6sg.png") no-repeat
    rgba(0, 0, 0, 0.6) center/1rem 1rem;
  opacity: 0;
  transition: opacity ease-in-out .2s;
}

.image-wrapper:hover::before {
  opacity: 1;
}

最終效果如下：

在線代碼及效果：https://codepen.io/axiliya/pen/OJgPvgq?editors=1100