CSS 分隔線中間帶文字分隔線

css3

ppp896 2022-02-19 11:23:50 ‧ 1033 瀏覽

分享至

CSS 實心分隔線中間帶文字實心分隔線在RWD怎麼設計比較好?
==== 天天開心 =====

想了老半天沒有比較好的方法......

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Felix

iT邦研究生 2 級 ‧ 2022-02-19 13:03:41

<h1 data-text="標題"></h1>

h1 {
    position: relative;
}

h1::before {
    content: '';
    height: 5px;
    position: absolute;
    inset: 0;
    background-color: #333;
    margin: auto;
}

h1::after {
    content: attr(data-text);
    display: table;
    position: absolute;
    inset: 0;
    background-color: #fff;
    margin: auto;
}