굵게 표시할 때 호버 시 인라인 요소의 수평 이동을 방지하는 방법은 무엇입니까?

호버링 시 인라인 요소가 두꺼워지는 경우 오프셋 문제 해결

HTML 목록 및 CSS를 사용하여 가로 메뉴를 만들 때 사용자는 다음을 수행할 수 있습니다. 문제가 발생합니다. 링크를 더 두껍게 설정하고 일시 중지할 때 더 두껍게 설정하면 두께 차이로 인해 메뉴 링크가 오프셋됩니다.

이 문제를 해결하기 위해 다음 해결 방법을 채택할 수 있습니다.

너비를 미리 설정하세요.

동일한 콘텐츠와 스타일을 가진 보이지 않는 의사 요소를 사용하세요. 부모 호버 스타일로. 데이터 속성(예: 제목)을 콘텐츠 소스로 사용합니다.

li {
  display: inline-block;
  font-size: 0;
}

li a {
  display: inline-block;
  text-align: center;
  font: normal 16px Arial;
  text-transform: uppercase;
}

a:hover {
  font-weight: bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul>
  <li><a href="#" title="height">height</a></li>
  <li><a href="#" title="icon">icon</a></li>
  <li><a href="#" title="left">left</a></li>
  <li><a href="#" title="letter-spacing">letter-spacing</a></li>
  <li><a href="#" title="line-height">line-height</a></li>
</ul>

위 내용은 굵게 표시할 때 호버 시 인라인 요소의 수평 이동을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!