CSS에서 콘텐츠 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS에서 콘텐츠 속성을 사용하는 방법

王林

풀어 주다： 2020-04-14 09:34:59

앞으로

3386명이 탐색했습니다.

CSS에서 콘텐츠 속성을 사용하는 방법

content 속성은 일반적으로 의사 요소의 내용을 표시하기 위해 ::before 및 ::after 의사 요소에서 사용됩니다. 일반적으로 우리가 가장 자주 사용하는 콘텐츠 속성 값은 실제로 선택할 수 있는 값이 많습니다.

1. 순수 문자 삽입

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.only-text::before{
        content: &#39;插入纯字符&#39;;
    }
</style>

<body>
    <h1>1、插入纯字符</h1>
    <div class="content only-text"></div>
</body>

로그인 후 복사

(권장 튜토리얼: CSS 입문 튜토리얼)

2. 그림 삽입

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-image::before{
        content: url(&#39;https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png&#39;);
    }
</style>

<body>
    <h1>2、插入图片</h1>
    <div class="content fill-image"></div>
</body>

로그인 후 복사

3. 현재 요소 번호 삽입(예: 현재 요소) index)

이 기능은 이벤트 페이지의 규칙 소개에 사용될 수 있습니다.

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-dom-attr::before{
        content: attr(data-title);
    }
</style>

<body>
    <h1>3、插入元素属性</h1>
    <div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 属性值"></div>
</body>

로그인 후 복사

5. 현재 요소 번호 삽입(지정된 유형)

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index li{
        position: relative;
        /* 给计数器加器起个名字，它只会累加 li 标签的索引，li元素中间的div并不会理会 */
        counter-increment: my;
    }
    .fill-dom-index li div::before{
        /* 使用指定名字的计算器 */
        content: counter(my)&#39;- &#39;;
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>4、插入当前元素编号(即当前元素索引)</h1>
    <div class="content fill-dom-index">
        <ul>
            <li><div>我是第1个li标签</div></li>
            <div>我是li标签中的第1个div标签</div>
            <li><div>我是第2个li标签</div></li>
            <li><div>我是第3个li标签</div></li>
            <div>我是li标签中的第2个div标签</div>
            <li><div>我是第4个li标签</div></li>
            <li><div>我是第5个li标签</div></li>
        </ul>
    </div>
</body>

로그인 후 복사