양쪽에 수평선이 있는 제목을 만드는 방법
이 시나리오에는 수직 중앙에 수평선이 있는 중앙 제목을 만드는 작업이 포함됩니다. 배경 이미지가 있기 때문에 투명한 배경을 유지하면서 각 측면에. 제목을 중앙에 배치하고 의사 클래스를 사용하여 선을 생성하려는 시도에도 불구하고 제목의 텍스트를 가로지르면 선이 사라지도록 하는 과제가 남아 있습니다.
한 가지 잠재적인 해결책은 투명도가 있는 배경 그라데이션을 활용하는 것입니다. 단어가 거주합니다. 그러나 이 접근 방식은 다양한 제목 길이를 처리할 때 비실용적이므로 그라디언트 스톱 배치가 불가능합니다.
처음에 제공되는 코드는 다음과 같습니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!