텍스트 앞에 정사각형 도형 표시하기 (CSS)

소제목(헤딩) 앞에 여러 가지 컬러로 된 정사각형을 추가한 워드프레스 사이트를 본 적이 있습니다. 예를 들어, 다음과 같이 소제목 앞에 빨간색 정사각형 도형이 표시되었습니다.

이런 도형을 제목 앞에 특수 기호(■)를 추가하는 것은 그다지 좋은 방법이 아닙니다. 

이 상황에서는 CSS 가상요소 :before를 사용하여 일괄적으로 정사각형 도형을 표시할 수 있습니다.

CSS 가상요소 :before를 사용하여 텍스트 앞에 정사각형 도형 표시하기

CSS를 사용하여 텍스트 앞에 정사각형 기호를 표시하고 싶은 경우 "How can I use :before property to create a square before a span" 문서에 제시된 CSS 코드를 사용할 수 있습니다.

위와 같이 다양한 컬러의 정사각형 기호를 각 라인 앞에 표시할 수 있습니다.

HTML 코드:

<div id="five_day_table">
  <h3>Annual Cleaning Schedule</h3>
  <span class='one'>Forecasted Rain Clean</span>
  <span class='two'>Forecasted Manual Clean</span>
  <span class='three'>Completed Manual Clean</span>
  <span class='four'>Forecasted Dirty Rain</span>
</div>

CSS 코드:

#five_day_table span {
  display: block;
  margin: 1px 3px 0px 0px;
}
span:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.one:before {
  background: Blue;
}
.two:before {
  background: red;
}
.three:before {
  background: green;
}
.four:before {
  background: brown;
}

상황에 맞게 적당히 응용할 수 있습니다. 예를 들어, 워드프레스 GeneratePress 테마에서 H2 헤딩 앞에 빨간색 정사각형 기호를 표시하고 싶은 경우에는 다음과 같은 CSS 코드로 테스트해볼 수 있습니다.

/* 워드프레스 GeneratePress 소제목 스타일 */

.single .entry-content h2:before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-bottom: -5px;
    margin-right: 5px;
    background: red;
}

다른 방법으로 가상요소를 사용하지 않고 border 속성을 사용하여 왼쪽 테두리선 굵기를 지정하는 것도 가능합니다. Astra, OceanWP, GeneratePress 테마에서 이 방법을 사용하여 헤딩(소제목) 스타일을 조정하는 방법을 다음 글에서 확인할 수 있습니다.

https://avada.tistory.com/2727

워드프레스 Astra, OceanWP, GeneratePress 테마 헤딩 스타일 예시

상기의 두 방법은 아바다, 뉴스페이퍼, Divi 등 다른 워드프레스 테마에도 적절히 응용하여 적용할 수 있으며, 티스토리 블로그에서도 비슷한 방법으로 구현이 가능합니다.

기본적인 CSS를 알면 쉽게 응용이 가능할 것입니다.

CSS, 어렵지 않습니다

참고

https://avada.tistory.com/1752

CSS로 텍스트 라인 수 제한하는 방법

https://avada.tistory.com/1777

CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법