> 웹 프론트엔드 > HTML 튜토리얼 > W3School-CSS 伪元素 (Pseudo-elements) 实例_html/css_WEB-ITnose

W3School-CSS 伪元素 (Pseudo-elements) 实例_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:28:39
원래의
1394명이 탐색했습니다.

CSS 伪元素 (Pseudo-elements)实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓(Outline)实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例
  • 01制作首字母特效

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>01制作首字母特效</title>        <style type="text/css">            p:first-letter {                color: #ff0000;                font-size: xx-large;            }        </style>    </head>    <body>        <p>            You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!        </p>    </body></html>
    로그인 후 복사

    02制作首行特效

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>02制作首行特效</title>        <style type="text/css">            p:first-line {                color: #ff0000;                font-variant: small-caps;            }        </style>    </head>    <body>        <p>            You can use the :first-line pseudo-element to add a special effect to the first line of a text!        </p>    </body></html>
    로그인 후 복사

    CSS 伪元素 (Pseudo-elements) 总结

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿