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

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

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

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

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%;  
}  

답변에 제공된 링크를 참조하면 코드의 수정된 버전은 다음과 같습니다.

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;
}

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