W3School-CSS 伪元素 (Pseudo-elements) 实例

最新推荐文章于 2024-08-05 15:57:37 发布

Just do it

最新推荐文章于 2024-08-05 15:57:37 发布

阅读量147

点赞数

文章标签：人工智能

原文链接：http://www.cnblogs.com/hoey/p/5153409.html

版权

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) 总结

转载于:https://www.cnblogs.com/hoey/p/5153409.html

Just do it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W3School-CSS 伪元素 (Pseudo-elements) 实例

CSS 伪元素 (Pseudo-elements)实例CSS 实例CSS 背景实例CSS 文本实例CSS 字体(font)实例CSS 边框(border)实例CSS 外边距 (margin) 实例CSS 内边距 (padding) 实例CSS 列表实例CSS 表格实例轮廓（Outline)实例CSS 尺寸 (Dimension) 实例CSS 分类 (Classificat...
复制链接

扫一扫