在纯CSS中水平“拆分”元素，每半部分具有不同的内容

，可以使用CSS的伪元素和flexbox布局来实现。

首先，我们可以使用伪元素::before和::after来创建两个半部分。然后，使用flexbox布局将它们水平排列。

下面是一个示例代码：

HTML:

<div class="split-container">
  <div class="left-half">
    <p>This is the left half.</p>
  </div>
  <div class="right-half">
    <p>This is the right half.</p>
  </div>
</div>

CSS:

.split-container {
  display: flex;
}

.left-half, .right-half {
  flex: 1;
}

.left-half::before {
  content: "";
  display: block;
  height: 100%;
  background-color: blue;
}

.right-half::before {
  content: "";
  display: block;
  height: 100%;
  background-color: red;
}

在上面的代码中，我们创建了一个包含两个半部分的容器（split-container）。每个半部分都有一个伪元素::before，用于创建不同的背景颜色。

.left-half和.right-half类设置了flex属性为1，这样它们会平均分配容器的宽度。

通过调整.left-half::before和.right-half::before的样式，可以实现不同的内容和样式。

这种方法可以用于创建各种水平拆分元素的效果，例如分割线、导航菜单等。

腾讯云相关产品和产品介绍链接地址：