在网页设计中,有时候需要在两行字之间加一条分割线,用 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 的样式定义,就可以自动在这两行字之间添加一条分割线了。
粉丝
0
关注
0
收藏
0