다음은 제공된 텍스트에 맞는 몇 가지 질문 기반 기사 제목입니다. * 양쪽에 수평선이 있는(배경 없음) 중앙 제목을 만드는 방법은 무엇입니까? * 당신에게 수평선을 추가하고 싶습니다

배경 없이 양면에 수평선이 있는 제목을 만드는 방법

이 시나리오에서는 배경색 없이 양쪽에 수평선이 있습니다.

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

/*Optional for background color*/
.color {
    background-color: #ccc;
}

설명:

• h1은 text-align: center를 사용하여 상대적으로 중앙에 배치됩니다.
• 전후 요소는 :before 및 :after를 사용하여 생성되며 수직으로 중앙에 위치하도록 절대적으로 51% 상단에 배치됩니다.
• 'a0'(줄바꿈 없는 공백)이 포함된 콘텐츠 속성은 텍스트가 있는 곳의 줄을 사라지게 합니다.
• overflow: Hidden은 줄이 텍스트와 겹치지 않도록 합니다.
• 선택적으로 원하는 경우 .color 클래스를 사용하여 배경색을 추가할 수 있습니다.

참고: 이 솔루션은 줄 배치를 수동으로 조정하지 않고도 다양한 길이의 제목을 처리할 수 있습니다.

위 내용은 다음은 제공된 텍스트에 맞는 몇 가지 질문 기반 기사 제목입니다. * 양쪽에 수평선이 있는(배경 없음) 중앙 제목을 만드는 방법은 무엇입니까? * 당신에게 수평선을 추가하고 싶습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!