Skip to content

Commit

Permalink
自动提交
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankelinli
frankelinli committed Dec 23, 2024
1 parent f4a73d9 commit f192c32
Show file tree
Hide file tree
Showing 4 changed files with 508 additions and 1 deletion.
244 changes: 244 additions & 0 deletions blog/2024/12-23-CSS伪元素经典应用案例2.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
---
date: 2024-12-23 12:46
slug: CSS伪元素经典应用案例2
---



我来展示几个实用且常见的伪元素应用案例：

1. **必填表单标记**：用于标记必填字段
2. **外部链接标识**：区分外部链接和内部链接
3. **引用样式**：美化引用内容
4. **文件类型标识**：根据文件类型显示不同图标
5. **步骤指引**：自动编号的步骤指示器
6. **工具提示**：无需JavaScript的简单提示框

![image-20241223125504548](https://docu-1319658309.cos.ap-guangzhou.myqcloud.com/image-20241223125504548.png)

![image-20241223125515957](https://docu-1319658309.cos.ap-guangzhou.myqcloud.com/image-20241223125515957.png)<!-- truncate -->



```jsx live
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
padding: 2rem;
background: #f5f7fa;
line-height: 1.6;
}

.demo {
margin: 2rem auto;
max-width: 600px;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 1. 必填表单标记 */
.form-group {
margin-bottom: 1rem;
}
.required-field::after {
content: '*';
color: #e53e3e;
margin-left: 4px;
}
.input {
width: 100%;
padding: 0.5rem;
border: 1px solid #e2e8f0;
border-radius: 4px;
margin-top: 0.5rem;
}

/* 2. 外部链接标识 */
.external-link {
color: #4a5568;
text-decoration: none;
}
.external-link::after {
content: '↗';
margin-left: 4px;
font-size: 0.9em;
color: #718096;
}

/* 3. 引用样式 */
.quote {
position: relative;
padding: 1.5rem;
background: #f7fafc;
border-radius: 8px;
}
.quote::before {
content: '"';
position: absolute;
top: -0.5rem;
left: 1rem;
font-size: 4rem;
color: #cbd5e0;
font-family: Georgia, serif;
line-height: 1;
}

/* 4. 文件类型标识 */
.file-link {
display: inline-block;
padding: 0.5rem 1rem;
text-decoration: none;
color: #4a5568;
background: #edf2f7;
border-radius: 4px;
}
.file-link[data-type]::before {
margin-right: 8px;
font-weight: bold;
}
.file-link[data-type="pdf"]::before {
content: '[PDF]';
color: #e53e3e;
}
.file-link[data-type="doc"]::before {
content: '[DOC]';
color: #2b6cb0;
}

/* 5. 步骤指引 */
.steps {
counter-reset: step;
}
.step {
position: relative;
padding-left: 3rem;
margin-bottom: 1.5rem;
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 0;
width: 2rem;
height: 2rem;
background: #4299e1;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.step::after {
content: '';
position: absolute;
left: 1rem;
top: 2.5rem;
bottom: -1.5rem;
width: 2px;
background: #e2e8f0;
}
.step:last-child::after {
display: none;
}

/* 6. 工具提示 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #4a5568;
cursor: help;
}
.tooltip::before {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
padding: 0.5rem 1rem;
background: #2d3748;
color: white;
font-size: 0.875rem;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
}
.tooltip:hover::before {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
</style>
</head>
<body>
<!-- 1. 必填表单 -->
<div class="demo">
<div class="form-group">
<label class="required-field">用户名</label>
<input type="text" class="input">
</div>
<div class="form-group">
<label class="required-field">密码</label>
<input type="password" class="input">
</div>
</div>

<!-- 2. 外部链接 -->
<div class="demo">
<a href="#" class="external-link">访问 GitHub</a><br>
<a href="#" class="external-link">查看文档</a>
</div>

<!-- 3. 引用样式 -->
<div class="demo">
<div class="quote">
生活中最重要的不是所处的位置，而是所朝的方向。
</div>
</div>

<!-- 4. 文件类型标识 -->
<div class="demo">
<a href="#" class="file-link" data-type="pdf">产品说明书.pdf</a><br>
<a href="#" class="file-link" data-type="doc">使用手册.doc</a>
</div>

<!-- 5. 步骤指引 -->
<div class="demo">
<div class="steps">
<div class="step">注册账号</div>
<div class="step">完善信息</div>
<div class="step">开始使用</div>
</div>
</div>

<!-- 6. 工具提示 -->
<div class="demo">
<span class="tooltip" data-tip="这是一个帮助提示">hover我查看提示</span>
</div>
</body>
</html>
```

这些都是实际开发中非常常用的案例：

1. **必填表单标记**：用于标记必填字段
2. **外部链接标识**：区分外部链接和内部链接
3. **引用样式**：美化引用内容
4. **文件类型标识**：根据文件类型显示不同图标
5. **步骤指引**：自动编号的步骤指示器
6. **工具提示**：无需JavaScript的简单提示框

这些效果的特点是：
- 不需要额外的HTML标签
- 可以通过CSS维护和修改
- 提升了用户体验
- 减少了JavaScript的依赖

需要我详细解释某个效果的实现原理吗？
35 changes: 35 additions & 0 deletions blog/2024/12-23-CSS伪元素解释.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
date: 2024-12-23 11:17
slug: CSS伪元素
---

CSS伪元素并没有真正生成HTML元素，它们只是在**视觉呈现层面**上的效果。

关键区别：

1. 用JavaScript获取DOM时，无法直接获取到伪元素
2. 伪元素不会出现在HTML结构中
3. 伪元素不会影响文档的语义结构
4. 不能给伪元素绑定事件监听器



<!-- truncate -->

举个例子：
```html
<div class="box">你好</div>
```

```css
.box::after {
content: "世界";
}
```

虽然页面上会显示"你好世界"，但：
- `document.querySelector('.box').childNodes` 只能看到"你好"
- 查看元素时只能看到 `<div class="box">你好</div>`
- 伪元素"世界"只存在于浏览器的渲染层面

所以更准确地说，伪元素是CSS提供的一种视觉效果机制，而不是真正的DOM元素。这也是为什么叫"伪"元素。
Loading

0 comments on commit f192c32

Please sign in to comment.