p元素使用伪元素::before实现小圆点，换行缩进

原创已于 2023-08-04 15:08:29 修改 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2023-08-04 09:45:00 首次发布

css 专栏收录该内容

8 篇文章

订阅专栏

文章介绍了如何在HTML的p元素中通过伪元素（`:before`）实现小圆点和竖杠效果，分别展示了代码和期望的样式。还提及了word-break和text-indent属性的使用来控制换行和缩进。

p元素使用伪元素实现小圆点，默认换行第二行会与小圆点平行，图2是想要的样式
在这里插入图片描述

小圆点代码

p::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #D8D8D8;
	margin: 0 5px 2px 0;
}

换行缩进代码

p{
    word-break:normal;
    text-indent: -1em;
    margin-left: 1em;
}

p元素实现竖杠，如图
在这里插入图片描述

::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 20px;
    background-color: #4C81F7;
    margin: 0px 12px -3px 0;
  }