텍스트를 교차할 때 사라지는 수평선이 있는 가운데 제목을 만드는 방법은 무엇입니까?

양쪽에 수평선이 있는 제목을 만드는 방법

이 시나리오에는 수직 중앙에 수평선이 있는 중앙 제목을 만드는 작업이 포함됩니다. 배경 이미지가 있기 때문에 투명한 배경을 유지하면서 각 측면에. 제목을 중앙에 배치하고 의사 클래스를 사용하여 선을 생성하려는 시도에도 불구하고 제목의 텍스트를 가로지르면 선이 사라지도록 하는 과제가 남아 있습니다.

한 가지 잠재적인 해결책은 투명도가 있는 배경 그라데이션을 활용하는 것입니다. 단어가 거주합니다. 그러나 이 접근 방식은 다양한 제목 길이를 처리할 때 비실용적이므로 그라디언트 스톱 배치가 불가능합니다.

처음에 제공되는 코드는 다음과 같습니다.

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

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}  </code>

답변에 따르면 수정된 코드 버전은 다음과 같습니다.

<code class="css">h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}</code>

이 수정된 코드는 문제를 해결하고 제목의 텍스트를 지날 때마다 수평선이 사라지도록 합니다.

위 내용은 텍스트를 교차할 때 사라지는 수평선이 있는 가운데 제목을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!