제목 옆에 선 스타일

2522 단어 CSS
다음 그림과 같이 제목 옆에 선을 긋는 스타일입니다.

style.css
h1 {
    background: none;
    position: relative;
    text-align: center;
    width: 500px;
    margin: 0 auto;
}

h1::before {
    border-top: 2px solid #000;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

h1 span {
    background-color: white;
    display: inline-block;
    padding: 0 1em;
    position: relative;
}

index.html
<h1><span>タイトルテキスト</span></h1>
가끔 써야 하기 때문에 필기를 해야 한다.

좋은 웹페이지 즐겨찾기