[分享]css两行字中间加一条直线

在网页设计中，有时候需要在两行字之间加一条分割线，用 CSS 很容易实现。可以使用 CSS 的 ::before 伪元素来创建线条，然后使用 content 属性将其添加到两行文字之间。p::befo...

在网页设计中，有时候需要在两行字之间加一条分割线，用 CSS 很容易实现。可以使用 CSS 的 ::before 伪元素来创建线条，然后使用 content 属性将其添加到两行文字之间。

p::before {
    content: "";
    border-top: 1px solid #000;
    display: block;
    margin: auto;
    width: 50%;
} 

在上述代码中，::before 伪元素的样式设置了一条宽度为50%、上边框为 1 像素宽的实线，并通过 display: block 使其呈现为块级元素，最后通过 margin: auto; 居中显示。

这样，只需要在 HTML 代码中使用如下格式书写文本即可：

<p>这里是第一行文字。</p>
<p>这里是第二行文字。</p> 

通过 CSS 的样式定义，就可以自动在这两行字之间添加一条分割线了。