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

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

Barbara Streisand
Barbara Streisand원래의
2024-11-10 21:44:03787검색

How to Create a Border Overlay for Child Divs with Pseudo Elements?

하위 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.