CSS::before 및 ::after의 의사 요소에 대한 자세한 설명

이 기사에서는 CSS의 ::before 및 ::after 의사 요소를 살펴보고 해당 응용 프로그램을 살펴보는 데 도움이 되기를 바랍니다.

이 글은 가장 간단한 것부터 시작하여 ::before 및 ::after를 이해하고 사용하는 방법을 설명합니다. 그런 다음 실제 사용 시나리오에 적용해 보세요.

::before 및 ::after는 무엇입니까?

::before 및 ::after는 의사 요소를 생성하기 위해 선택기에 추가할 수 있는 키워드입니다. 의사 요소는 선택기와 일치하는 요소의 콘텐츠 앞이나 뒤에 삽입됩니다.

content 속성

1) ::before 및 ::after 아래의 고유 콘텐츠는 CSS 렌더링에서 요소의 논리적 헤드 또는 테일에 콘텐츠를 추가하는 데 사용됩니다.

2) ::before 및 ::after는 콘텐츠 속성과 함께 사용해야 합니다. 콘텐츠는 삽입된 콘텐츠를 정의하는 데 사용됩니다. 콘텐츠에는 최소한 비어 있는 값이 있어야 합니다.

3) 이러한 추가 사항은 DOM에 표시되지 않으며 변경되지 않습니다. 문서의 내용은 복사할 수 없으며 CSS 렌더링 레이어에만 추가됩니다. 따라서 의미 있는 콘텐츠를 표시하려면 :before 또는 :after를 사용하지 말고 장식적인 콘텐츠를 표시하는 데 사용하세요.

content는 다음 값을 사용할 수 있습니다.

string

따옴표를 사용하여 추가될 문자열을 묶습니다. 요소 내용에 String

 p::before{
    content: "《";
    color: #000000;
}
p::after{
    content: "》";
    color:#000000;
}

<p>JavaScript高级程序设计</p>

attr()

은 attr()을 통해 현재 요소의 속성을 호출합니다(예: 이미지 대체 텍스트 또는 링크의 href 주소 표시).

a::after {
    content: ' → ' attr(href); /* 在 href 前显示一个箭头 */
}

 <a href="https://www.baidu.com/">百度地址</a>

 a::after{
    content: "【" attr(href) "】";
}

<a href="https://www.baidu.com/">百度地址</a>

url()/uri()

은 미디어 파일을 참조하는 데 사용됩니다. 예를 들어, "Baidu"는 앞면에 그림을 제공하고 뒷면에 ​​href 속성을 제공합니다.

a::before{
    content: url("img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}

<a href="https://www.baidu.com/">百度地址</a>

Note

1) URL에는 따옴표를 사용할 수 없습니다. URL을 따옴표로 묶으면 문자열이 되고 이미지 자체 대신 "url(image.jpg)"라는 텍스트가 콘텐츠로 삽입됩니다.

2) 콘텐츠 속성은 이미지를 직접 사용합니다. 너비와 높이를 작성하더라도 이미지 크기는 변경할 수 없습니다.

해결 방법: 이 문제를 해결하려면 content:''를 공백으로 작성하면 됩니다. background:url() 사진 추가

/*伪元素添加图片：*/
.wrap:after{
    /*内容置为空*/
    content:"";
    /*设置背景图，并拉伸*/
    background:url("img/0CSS::before 및 ::after의 의사 요소에 대한 자세한 설명") no-repeat center;
    /*必须设置此伪元素display*/
    display:inline-block;
    /*必须设置此伪元素大小（不会被图片撑开）*/
    background-size:100%;
    width:100px;
    height:100px;
}复制代码

3) img, input 및 기타 단일 태그에는 의사 요소가 적용되지 않습니다. :after 및 :before 의사 요소(일부 브라우저에서는 사용할 수 없음) , 예: Apple에서는 해당 태그가 유효하지 않다고 판단합니다. 단일 태그 자체에는 하위 요소가 있을 수 없기 때문입니다.

해결책: img에 div를 래핑하여 문제 해결

4) 의사 요소의 이미지를 동적으로 변경하려면 현재 요소에 의사 요소 이미지의 기본 스타일을 추가하고, 그런 다음 동적 클래스를 사용하여 의사 요소의 이미지를 작성합니다.

::적용 전 및 :: 적용 후

따옴표 속성과 함께 사용

괄호 추가

 h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

<h1 id="给标题加括号">给标题加括号</h1>

따옴표 추가

 h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

<h2 id="给标题加引号">给标题加引号</h2>

지정되지 않음 , 기본

 h3::before{
    content:open-quote;
}
h3::after{
    content:close-quote;
}

<h3 id="不设置quotes">不设置quotes</h3>

Decoration Title

h1 {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    text-align: center;
    gap: 40px;
}

h1::before, h1::after {
    content: '';
    border-top: 6px double;
}

<h1 id="标题">标题</h1>

레이아웃은 <h1> 요소를 3개의 열로 변환하여 구현됩니다. 왼쪽 열과 오른쪽 열은 너비가 minmax(50px, 1fr)인 이중선입니다. 이는 일치하는 너비가 항상 50px 이상임을 의미합니다. 제목 텍스트가 깔끔하게 중앙에 배치되었습니다.

리본 제목

 h1 {
    position: relative;
    margin: 0 auto 20px;
    padding: 10px 40px;
    text-align: center;
    background-color: #875e46;
}

h1::before, h1::after {
    content: '';
    width: 80px;
    height: 100%;
    background-color: #724b34;

    /* 定位彩带两端形状的位置，并且放在最底层 */
    position: absolute;
    z-index: -1;
    top: 20px;

    /* 彩带两端的形状 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

    /* 绘制并定位彩带的阴影三角形 */
    background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

h1::before {
    left: -60px;
}

h1::after {
    right: -60px;
    transform: scaleX(-1); /* 水平翻转 */
}
---------------------------
 <h1 id="标题">标题</h1>

더욱 사실적인 그림자 구현

.box{margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc}
.shadow{position:relative;max-width:270px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset}
.shadow::after,.shadow::before{position:absolute;z-index:-1;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);content:"";transform:rotate(-3deg)}
.shadow::after{right:10px;left:auto;transform:rotate(3deg)}


<div class="box shadow"></div>

교체 내용

어떤 경우에는 콘텐츠에 ::before를 사용할 필요가 없습니다. 또는: :후. 콘텐츠가 단일 이미지로 설정된 경우 해당 콘텐츠를 요소에서 직접 사용하여 해당 요소의 HTML 콘텐츠를 바꿀 수 있습니다.

예를 들어 페이지에 다음 세 가지 콘텐츠가 있습니다.

교체 클래스를 추가한 후

.replace {
    content: url(img/replace.png);
}

1)具有简单文本的元素。它会被取代。
2)一个包含<img src="/static/imghw/default1.png" data-src="img/cat.jpg" class="lazy" alt="CSS::before 및 ::after의 의사 요소에 대한 자세한 설명" >在其中的元素。它也会被取代。
3)<img src="/static/imghw/default1.png" data-src="img/cat.jpg" class="lazy" alt="CSS::before 및 ::after의 의사 요소에 대한 자세한 설명" >直接一个元素。Firefox不会取代它，但其他浏览器会。

清除浮动

方式一：

.classic-clearfix::after {
    content: '';
    display: block;
    clear: both;
}

方式二：

.modern-clearfix {
    display: flow-root;
}

模拟float:center的效果

float没有center这个取值，但是可以通过伪类来模拟实现。

原理：左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

body { font: 14px/1.8 Georgia, serif;}
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }

<div id="page-wrap">
    <img  src="/static/imghw/default1.png"  data-src="img/cat.jpg"  class="lazy"   id="logo" alt="CSS::before 및 ::after의 의사 요소에 대한 자세한 설명" >
    <div id="l">
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
    <div id="r">
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
</div>

引用参考:

W3C官方文档

Diving into the ::before and ::after Pseudo-Elements

Faking ‘float: center’ with Pseudo Elements

原文地址：https://juejin.cn/post/6986629782666477599

作者：Axjy

相关推荐：《css视频教程》！

위 내용은 CSS::before 및 ::after의 의사 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!