텍스트 구분선을 생성하는 방법

응답형 텍스트 구분선을 생성하는 방법

第一步 - HTML 추가:

<div class="divider">Lorem Ipsum</div>

第二步 - CSS 추가:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

직접 테스트해 보세요

예제 설명:

이 예제에서는 CSS를 사용하여 텍스트 구분선을 생성하는 방법을 가르칩니다. 구체적으로, 이 효과는 HTML과 CSS의 조합을 통해 이루어집니다.

먼저, 여러분은 HTML에서 "divider" 클래스를 가진 <div> 요소를 추가하고, 그 안에 표시하고자 하는 텍스트를(이 예제에서는 "Lorem Ipsum"입니다) 추가해야 합니다.

그런 다음, CSS에서 여러분은 .divider 클래스에 스타일을 설정했습니다. 여러분은 글꼴 크기를 30픽셀로 설정하고, flex 레이아웃을 사용하며 다음을 설정했습니다: align-items: center; 텍스트를 구분선 내에서 가로 중앙에 위치시키기 위해 사용했습니다.

그런 다음, 여러분은 ::before 그리고 ::after 구분선의 양쪽에 장식을 추가합니다. 이 두伪요소 모두 설정되었습니다: flex: 1 그런 다음, 이들을 가지고 .divider 요소 내에서 텍스트를 제외한 모든 공간. 여러분은 다음과 같이 설정했습니다: content: '' 이 두伪요소가 비어 있도록 하여 내용을 포함하지 않도록 합니다.

그런 다음, 여러분은 내쪽 여백, 배경색, 그리고 외쪽 여백을 설정하여 구분선 스타일을 정의합니다. 이 예제에서 구분선의 색은 빨강이며, 내쪽 여백과 외쪽 여백이 있습니다.