[分享]css中怎么加小黑点

在CSS中，我们可以使用伪元素“::before”来添加小黑点，让网页样式更加美观。首先，在需要添加小黑点的元素的样式中，设置“: relative;”属性，这是为了让“::before”伪元素相对于...

在CSS中，我们可以使用伪元素“::before”来添加小黑点，让网页样式更加美观。
首先，在需要添加小黑点的元素的样式中，设置“position: relative;”属性，这是为了让“::before”伪元素相对于它进行定位。
接着，使用“::before”伪元素来添加小黑点，代码如下：
pre{
position: relative;
}
pre::before {
content: "?"; /* 这里为添加的小黑点符号 */
display: block;
position: absolute;
top: 50%; /* 位置可以自行调整 */
left: -10px; /* 同上 */
transform: translateY(-50%);
font-size: 20px; /* 字体大小可以自行调整 */
color: #333; /* 小黑点颜色 */
}
其中，“content”属性定义了添加的内容，这里指定为使用“?”符号作为小黑点；“display: block;”属性让“::before”伪元素成为块级元素；“position: absolute;”让它相对于父元素进行绝对定位；“top”和“left”属性确定了它的具体位置，这里设置为相对于元素左侧的10像素位置；“transform: translateY(-50%);”属性将它向上移动了50%的高度，使它垂直居中；“font-size”和“color”属性分别定义了字体大小和颜色，可以根据实际需求进行调整。
以上代码可以在需要添加小黑点的元素中使用“pre::before”的方式进行添加，从而实现网页样式的美化。