diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 93a56dbe..2f901185 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -79,6 +79,7 @@ export default {
 						{ text: '实现高度过渡', 'link': '/hand-notes/CSS/实现高度过渡'},
 						{ text: 'CSS实现类似微信头像效果', 'link': '/hand-notes/CSS/CSS实现类似微信头像效果'},
 						{ text: '虚线边框', 'link': '/hand-notes/CSS/虚线边框'},
+						{ text: '图片加载出错样式设置', 'link': '/hand-notes/CSS/图片加载出错样式设置'},
 					]
 				},
 				{
diff --git a/docs/favorites/Linux/index.md b/docs/favorites/Linux/index.md
index 5cf73838..5ebfc362 100644
--- a/docs/favorites/Linux/index.md
+++ b/docs/favorites/Linux/index.md
@@ -6,4 +6,4 @@ layout: doc
 
 - [Linux命令大全搜索工具](https://github.com/jaywcjlove/linux-command)
 
-- [explainshell.com](https://explainshell.com/)
+- [explainshell](https://explainshell.com/)
diff --git "a/docs/hand-notes/CSS/\345\233\276\347\211\207\345\212\240\350\275\275\345\207\272\351\224\231\346\240\267\345\274\217\350\256\276\347\275\256.md" "b/docs/hand-notes/CSS/\345\233\276\347\211\207\345\212\240\350\275\275\345\207\272\351\224\231\346\240\267\345\274\217\350\256\276\347\275\256.md"
new file mode 100644
index 00000000..89a2d3c4
--- /dev/null
+++ "b/docs/hand-notes/CSS/\345\233\276\347\211\207\345\212\240\350\275\275\345\207\272\351\224\231\346\240\267\345\274\217\350\256\276\347\275\256.md"
@@ -0,0 +1,86 @@
+---
+layout: doc
+---
+
+# 图片加载出错样式设置
+
+:::tip
+**冷知识**：图片加载出错时，为`img`元素设置的伪元素`::before/::after`会生效，图片正常加载时，不会生效
+:::
+
+## 代码展示
+
+> `html`代码
+
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Image Error Display</title>
+    <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+    <div class="img-error--handle">
+        <div>
+            <h1>图片加载出错时的处理</h1>
+            <h2>加载出错</h2>
+            <img class="img-target" src="./a.png" alt="我是一张风景图画">
+            <h2>正确加载</h2>
+            <img class="img-target" src="./image/landscape.webp" alt="landscape">
+        </div>
+    </div>
+</body>
+</html>
+```
+
+> `css`代码
+
+```css
+.img-error--handle {
+    margin: 100px auto 0;
+    display: flex;
+    justify-content: center;
+}
+.img-target {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    display: block;
+}
+.img-target::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    color: transparent;
+    background: #F5F5F5 url("./image/image-error.webp") no-repeat center / 50% 50%;
+}
+.img-target::after {
+    content: attr(alt);
+    position: absolute;
+    width: 100%;
+    background-color: rgba(0, 0, 0, .5);
+    left: 0;
+    bottom: 0;
+    line-height: 2;
+    color: #FFFFFF;
+    font-size: 12px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    padding: 0 10px;
+}
+```
+
+## 效果预览
+
+- [查看效果](https://mx52jing.github.io/Notes/css-related/img-error-display/index.html)
\ No newline at end of file
