CSS 의사 요소::before 및 ::after의 세 가지 사용법 소개(코드 예제)

이 글에서는 CSS에서 의사 요소 ::before 및 ::after의 세 가지 사용법을 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

:before 및 ::after 의사 요소의 경우 이전 기사에서 css:after 의사 요소 를 사용하세요. 멋진 오버레이 효과를 만듭니다. 하지만 이 외에도 다양한 용도로 사용됩니다. 이 글에서는 ::before와 ::after의 세 가지 다른 용도를 소개합니다.

먼저 의사 요소가 어떻게 작동하는지 간략하게 살펴보겠습니다.

::after 및 ::before 사용 시 주의사항

콘텐츠 속성 값이 있는 경우에만 브라우저는 이러한 요소를 "생성된 콘텐츠"로 렌더링됩니다. 값은 빈 문자열(content: "";)로 설정할 수 있습니다.

브라우저가 이 요소를 DOM에 삽입하면 선택기에 사용되는 요소에 삽입됩니다. 이는 사양의 정의입니다.

:: 이전은 원본 요소의 실제 콘텐츠 이전에 스타일이 가능한 하위 의사 요소를 나타냅니다.

:: 원본 요소의 실제 이후 이후 content 실제 콘텐츠 바로 뒤에 있는 스타일 지정 가능한 하위 의사 요소를 나타냅니다.

기본적으로 이 새 요소는 인라인 요소가 됩니다. 요소가 DOM에 삽입되면 다른 요소처럼 수정할 수 있습니다. 이를 통해 우리는 다양한 것을 제어할 수 있습니다.

중요 사항: 모든 브라우저/스크린 리더 조합이 콘텐츠 의사 요소에 배치한 콘텐츠를 읽을 수 있는 것은 아닙니다. 이는 텍스트 요소에만 사용해야 합니다. 실제 콘텐츠는 항상 페이지의 마크업에 추가되어야 합니다.

특정 유형의 링크 옆에 아이콘 추가

사용자에게 링크에 대한 추가 시각적 정보를 제공하려면 다음을 사용할 수 있습니다. : 마크업을 추가하지 않고 아이콘을 추가한 후.

절대링크가 아닌 링크에는 '외부링크' 아이콘을 추가해 주세요.

a[href^="http"]::after {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);
    background-size: contain;
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

이 코드에서는 내부 링크가 상대 경로로 작성되었다고 가정하고 http로 시작하는 href 요소가 있는 앵커 태그를 찾습니다.

이 방법의 또 다른 유용한 예는 PDF

a[href$=".pdf"]::after {
    content: " (pdf)";
    font-size:  .8em;
    color: tomato;
}

.pdf로 끝나는 모든 href의 경우 "(pdf)"라는 문자열을 추가할 수 있습니다. 글꼴 크기, 색상 및 기타 효과를 조정할 수 있는 완전한 CSS 제어 기능이 있으므로 이미지보다 제어하기가 더 쉽습니다.

이러한 선택기에 대한 자세한 내용은 PHP 중국어 웹사이트의

css 온라인 매뉴얼을 참조하세요.

컨테이너에 흥미로운 "테두리" 추가

Houdini Paint API를 모든 브라우저에서 사용할 수 있기 전에는 요소가 매우 훌륭하다고 느낄 수 있습니다. 지루한. 그러나 간단한 CSS와 ::before 및 ::after를 사용하면 모든 브라우저에서 더 흥미로운 효과를 얻을 수 있습니다.

.related-article {  
    padding: 20px;
    position: relative;
    background-image: linear-gradient(120deg,#eaee44,#33d0ff);
}
.related-article * {
    position: relative; // Set stacking context to keep content on top of the background
}
.related-article::before {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

이 예에서는 상위 요소에 배경 그라데이션을 적용하고 ::before 요소를 사용하여 간단한 배경색으로 내부를 "클립"합니다. 이는 두 개의 직사각형임에도 불구하고 테두리 모양을 제공합니다. 테두리에 맞는 치수를 얻으려면 몇 가지 간단한 수학이 필요합니다.

의사 요소를 절대값으로 배치하여 위치를 제어할 수 있습니다. Sass는 변수와 수학 함수를 사용하여 수학 연산을 더 쉽게 만듭니다.

제목 아래에 멋진 작은 테두리를 추가하려면 전체 테두리 대신 어떻게 해야 할까요?

이를 달성하기 위해 ::after 요소를 사용할 수 있습니다.

.cool-border::after {
    content: "";
    display: block;
    height: 7px;
    background-image: linear-gradient(120deg, #e5ea15, #00c4ff);
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 45%;
    transform: translateX(-50%) skew(-50deg);}.cool-border {
    position: relative;
}

이 예에서는 의사 요소를 절대 위치에 배치합니다. "테두리"의 크기는 새 요소의 높이에 따라 달라집니다. 이것이 오른쪽 또는 왼쪽 "테두리"인 경우 요소 너비를 사용하여 크기를 결정할 수 있습니다.

이것은 페이지의 한 요소이므로 테두리를 편향할 수도 있습니다.

스타일 태그 추가가 필요 없는 스타일 요소 추가

는 좋은 의미 요소입니다. 추가 마크업으로 그것을 망치지 말자.

많은 ::after 예제(이 기사의 다른 예제 포함)에서 의사 요소 위치: 절대를 볼 수 있으며, 물론 이것이 사실이어야 한다는 규칙은 없습니다.

::before 및 ::after를 그리드 항목으로 사용하여

에 따옴표를 배치해 보겠습니다.

모든 ​​것을 그리드에 명시적으로 배치하면 추가 래퍼에 대해 걱정할 필요가 없습니다. 또한 인용문을 배경 이미지로 사용하고 간단한 기능인 그리드 템플릿 열에서 최소 최대 크기 조정을 허용할 수도 있습니다.

Finally

사실 CSS 의사 요소::after 및 ::before는 많이 사용되며, 모두가 사용해야 합니다. 이를 실제 적용에 활용하는 더 좋은 방법이 있다면 누구나 메시지를 남겨 토론할 수 있습니다.

위 내용은 CSS 의사 요소::before 및 ::after의 세 가지 사용법 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!