의사 요소를 사용하여 하위 Div에 대한 테두리 오버레이를 만드는 방법은 무엇입니까?

하위 Div에 대한 테두리 오버레이 만들기

문제:

이미지와 유사하게 하위 div의 콘텐츠를 오버레이하는 테두리 제공됩니다.

HTML 및 CSS 코드:

<div class="box-border box-border-participe">
  <div class="box-participe">
    <a>Participe</a>
  </div>
</div>

.box-participe {
  background-color: #94C120;
  padding: 10px 40px;
}

해결책:

이를 달성하려면 의사 요소를 사용하면 테두리를 만들고 추가 마크업을 피할 수 있습니다. 또한 위치와 크기를 쉽게 제어할 수 있습니다.

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

이 방법을 사용하면 하위 div에 대한 세련된 테두리 오버레이를 쉽게 만들어 웹사이트의 시각적 매력을 향상시킬 수 있습니다.

위 내용은 의사 요소를 사용하여 하위 Div에 대한 테두리 오버레이를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!