[CSS] bold 효과 시 width가 꿀렁이지 않게 막는 방법

텍스트에 hover 효과 시, font-weight가 400에서 700으로 변경되도록 작업하고 있었다.

그런데 hover 할 때마다 두께가 두꺼워짐에 따라 width도 같이 늘어났다 줄어들었다 하는 바람에 꿀렁꿀렁 거리는 효과가 생기는 것을 발견했다 😭

이를 해결하기 위해서 검색을 하던 중, 독특한 방법으로 해결하는 법을 발견했다.
바로 CSS의 after, attr() 속성을 이용하는 것이다.

간단하게 원리를 정리하자면, after로 가상의 content를 생성하는데 이때 attr()를 이용해서 동일한 텍스트를 넣어줌으로써 width를 동일하게 가져가게끔 하는 것이다.

예제 코드를 통해 살펴 보자!

<div class="content">
  <div class="item">content1</div>
  <div class="item">content2</div>
  <div class="item">content3</div>
  <div class="item">content4</div>
  <div class="item">content5</div>
</div>

.item {
	font-weight: 400;
}

.itme:hover {
	font-weight: 700;
}

위의 코드로 작성을 먼저 해보면 .item에 hover시 넓이가 꿀렁꿀렁 거린다.
이를 attr을 사용하여 방지해 보자.

<div class="content">
  <div class="item" title="content1">content1</div>
  <div class="item" title="content2">content2</div>
  <div class="item" title="content3">content3</div>
  <div class="item" title="content4">content4</div>
  <div class="item" title="content5">content5</div>
</div>

title을 생성하여 각 항목들의 텍스트를 그대로 각각 담아준다.

.item {
	font-weight: 400;
}

.item:hover {
	font-weight: 700;
}

.item:after {
	content: "attr(title)" // title의 값으로 대체
    font-weight: 700; // weight 속성 동일하게 부여
   	display: block;
    // 해당 텍스트들의 넓이를 가져가되, 보이지 않게 아래와 같은 속성을 추가한다.
    height: 0px;
  	visibility: hidden;
}

어떻게 보면 after 속성의 특징을 이용한 트릭인데, 굉장히 신선하고 재밌게 느껴졌다.

다른 작업에서도 사용할 수 있으면 다양한 방법으로 사용해야지 🤔