css两行字中间加一条直线

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 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 的样式定义,就可以自动在这两行字之间添加一条分割线了。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两行字中间加一条直线

粉丝

0

关注

0

收藏

0

已有0次打赏