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實現文字兩側橫杠的方法。可以根據實際需求調整橫杠的顏色、高度和寬度等屬性,實現更加個性化的效果。
下一篇css 實現彈窗