欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css 實現文字兩側橫杠

錢艷冰2年前15瀏覽0評論

CSS是前端開發必備技能之一,它可以用來實現各種各樣的效果,比如今天我們要介紹的文字兩側橫杠。

實現文字兩側橫杠的方法有很多種,我們這里介紹一種簡單的方法。代碼如下:

p {
position: relative; /* 讓p標簽變成相對定位 */
}
p::before, p::after { /* 在p之前和之后插入偽元素 */
content: "";
position: absolute; /* 使偽元素的位置相對于p標簽 */
width: 50%; /* 使偽元素寬度為p標簽的一半 */
height: 1px; /* 橫杠的高度 */
background-color: #000; /* 橫杠的顏色 */
top: 50%; /* 使橫杠的位置居中 */
}
p::before { /* 使第一個偽元素在p的左側 */
left: 0;
}
p::after { /* 使第二個偽元素在p的右側 */
right: 0;
}

以上代碼會在p標簽內容的兩側添加一個橫杠,如下所示:

————這是一段文字————

以上就是使用CSS實現文字兩側橫杠的方法。可以根據實際需求調整橫杠的顏色、高度和寬度等屬性,實現更加個性化的效果。