在页面设置这四个字前面设置一个圆球，红色

在HTML和CSS中，要在文本“页面设置”前面添加一个红色的圆球，可以通过以下步骤实现：

1. 使用HTML创建文本内容，并使用`span`标签来包裹“页面设置”这几个字。
2. 通过CSS设置`span`标签的`position`属性为`relative`，这样可以相对于它来定位后面的圆球。
3. 在HTML中添加一个`div`标签，并给它一个类名，用于表示圆球。
4. 使用CSS设置`div`的`position`属性为`absolute`，并相对于`span`标签定位，使其显示在文本前面。
5. 设置`div`的`width`和`height`属性为相同的值，并将`border-radius`设置为50%，这样可以使`div`变成一个完美的圆形。
6. 设置圆球的颜色为红色，通过`background-color`属性实现。

HTML代码示例：

<p>• <span class="text">页面设置</span></p>
<div class="ball"></div>

CSS代码示例：

.text {
  position: relative;
}

.ball {
  position: absolute;
  left: -20px; /* 根据实际需要调整位置 */
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}