텍스트가 겹치지 않고 가로 막대가 있는 우아한 중앙 제목을 만드는 방법은 무엇입니까?

가로 막대가 있는 우아한 제목

양쪽에 가로 막대가 있는 중앙 제목을 만들 때 막대가 교차하는 것을 피하는 것이 까다로울 수 있습니다. 텍스트. 순수한 CSS를 사용하여 이 효과를 얻을 수 있는 솔루션은 다음과 같습니다.

솔루션 개요

이 방법은 의사 요소를 활용하여 수평 막대를 생성하고 상대적인 특정 위치에 배치합니다. 텍스트에. 또한 텍스트가 있는 막대를 숨기기 위해 오버플로와 함께 막대 중 하나에 음수 여백이 적용됩니다.

구현

이 솔루션을 구현하려면 다음을 따르세요. 다음 단계를 따르세요.

1. 제목에 대해 다음 CSS 규칙을 정의합니다.

<code class="css">h1 {
    position: relative;  
    font-size: 30px;  
    z-index: 1;
    overflow: hidden;
    text-align: center;
}</code>

이 규칙은 제목의 위치를 ​​지정하고 글꼴 크기를 지정하며 오버플로 숨기기를 활성화합니다.

2. 막대에 대한 의사 요소 만들기:

<code class="css">h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}</code>

이러한 의사 요소는 특정 너비와 높이로 제목 중앙에 배치되며, 가로 막대로 작동합니다.

3. 왼쪽 막대 오프셋 및 정렬:

<code class="css">h1:before {
    margin-left: -50%;
    text-align: right;
}</code>

이 규칙은 왼쪽 막대에 음수 여백을 적용하여 정렬하고 보장합니다.

이러한 CSS 규칙을 구현하면 추가 HTML 요소를 포함하지 않고도 텍스트 위에 가로 막대가 사라지는 가운데 맞춤 제목을 쉽게 만들 수 있습니다.

위 내용은 텍스트가 겹치지 않고 가로 막대가 있는 우아한 중앙 제목을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!