将文本移出 div - CSS

有时候我们想要在一个元素之外放置某些文本，但是又不想增加额外的 HTML 元素。这时候，我们可以使用 CSS 来实现将文本移出 div 的效果。

使用 ::before 或 ::after 伪元素

我们可以使用 ::before 或 ::after 伪元素来实现将文本移出 div 的效果。具体的做法是：

1. 为要移出文本的 div 添加 position: relative 样式。
2. 使用 ::before 或 ::after 伪元素，并为其添加 content 属性来放置需要移出的文本。
3. 为伪元素添加 position: absolute 和 top 或 bottom 等样式来定位文本。

示例代码如下：

.text-outside {
  position: relative;
}

.text-outside::before {
  content: 'Hello, World!';
  position: absolute;
  top: -30px; /* 或者使用 bottom: 100%; 来定位在 div 上方 */
  left: 0;
}

Markdown 代码片段：

## 使用 ::before 或 ::after 伪元素

我们可以使用 ::before 或 ::after 伪元素来实现将文本移出 div 的效果。具体的做法是：

1. 为要移出文本的 div 添加 `position: relative` 样式。
2. 使用 ::before 或 ::after 伪元素，并为其添加 `content` 属性来放置需要移出的文本。
3. 为伪元素添加 `position: absolute` 和 `top` 或 `bottom` 等样式来定位文本。

示例代码如下：

```css
.text-outside {
  position: relative;
}

.text-outside::before {
  content: 'Hello, World!';
  position: absolute;
  top: -30px; /* 或者使用 bottom: 100%; 来定位在 div 上方 */
  left: 0;
}
```

使用负 margin

另一种将文本移出 div 的方法是使用负 margin。具体做法是：

1. 为要移出文本的 div 添加 position: relative 样式。
2. 在 div 中添加文本，并使用 margin-top 或 margin-bottom 为其设置负值，将文本移出 div。

示例代码如下：

.text-outside {
  position: relative;
}

.text-outside p {
  margin-top: -30px; /* 或者使用 margin-bottom: -30px; 来移出文本 */
}

Markdown 代码片段：

## 使用负 margin

另一种将文本移出 div 的方法是使用负 margin。具体做法是：

1. 为要移出文本的 div 添加 `position: relative` 样式。
2. 在 div 中添加文本，并使用 `margin-top` 或 `margin-bottom` 为其设置负值，将文本移出 div。

示例代码如下：

```css
.text-outside {
  position: relative;
}

.text-outside p {
  margin-top: -30px; /* 或者使用 margin-bottom: -30px; 来移出文本 */
}
```

以上就是将文本移出 div 的两种常用方法，可以根据实际情况选择使用。