1. :first-letter 表示第一个字符
  2. :first-line 表示文字的第一行
  3. :before 选中元素的最前边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容。
  4. :after 选中元素的最后边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容。

first-letter demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            /*:first-letter 表示第一个字符*/

            p:first-letter{

                color: red;

                font-size: x-large;

            }

        </style>

    </head>

    <body>

        <p>

            不知道喜欢你什么，实在不知道，如果确定知道喜欢你什么，是不够喜欢你。因为不确定具体喜欢你什么，所以喜欢你所有一切及其他。

        </p>

    </body>

</html>

效果：

first-line demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            /*:first-line 表示文字的第一行*/

            p:first-line{

                color: red;

                font-size: x-large;

            }

        </style>

    </head>

    <body>

        <p>

        我们是世人最好的朋友，我们是世人最差的情人，我们彼此相爱，就是为民除害。

        </p>

    </body>

</html>

效果图：

:before :after demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            /*:first-line 表示文字的第一行*/

            p:before{

                content: "嘻嘻:";

                color: red;

                font-size: x-large;

            }

            P:after{

                content: "哈哈";

                color: green;

                font-size: x-large;

            }

        </style>

    </head>

    <body>

        <p>

        我们是世人最好的朋友，我们是世人最差的情人，我们彼此相爱，就是为民除害。

        </p>

    </body>

</html>

效果：

前端学习 -- Css -- 伪元素的更多相关文章

  1. CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素

    CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...

  2. 前端学习 -- Css -- 伪类

    伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...

  3. 前端学习 --Css -- 子元素的伪类

    :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

  4. 前端学习 -- Css -- 兄弟元素选择器

    为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...

  5. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  6. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  7. 学习CSS之如何改变CSS伪元素的样式

    一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 ...

  8. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  9. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

随机推荐

  1. python 网页转pdf

    主要使用的是wkhtmltopdf的Python封装——pdfkit centos环境 安装:Install python-pdfkit pip install pdfkit 安装:Install w ...

  2. 三羊献瑞：next_permutation()

    三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉  +   三 羊 献 瑞-------------------   三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代 ...

  3. [转载] Ubuntu 12.04下安装git,SSH及出现的Permission denied解决办法

    如何安装ssh http://os.51cto.com/art/201109/291634.htm 仅需要阅读至成功开启ssh服务即可 http://www.linuxidc.com/Linux/20 ...

  4. python json模块使用详情

    python其他知识目录 #json.数据交换用到json文件.json是特殊的字符串.访问网站,返回的就是json 1.json简介: 定义:JSON(JavaScript Object Notat ...

  5. printf命令详解

    基础命令学习目录首页 本文是Linux Shell系列教程的第(八)篇,更多shell教程请看:Linux Shell系列教程 在上一篇:Linux Shell系列教程之(七)Shell输出这篇文章中 ...

  6. [!] Attempt to read non existent folder `***********`

    以前遇到过的问题,最近又出现了,问题单独列出,容易查找: $ pod install [!] Attempt to read non existent folder `/Users/galahad/D ...

  7. centos 切换用户显示bash-4.2$，不显示用户名路径的问题

    原文链接: http://blog.csdn.net/testcs_dn/article/details/70482468

  8. oracle varchar2改成大字段类型clob，读取大字段内容

    http://blog.csdn.net/cai7095576/article/details/23999549

  9. PHP中的文件包含

    在PHP中,包含文件有两种方式:include和require.这两种方式的功能一样,只有一个区别,就是使用require包含一个文件时,如果出现错误,脚本不会继续执行:而如果使用include包含, ...

  10. TeamWork#2,Week 2,We are sixsix!

    We are sixsix! (从左至右依次是:郝倩.张志浩.高雅智[高哥].牛强.张明培育.彭林江.王卓) 郝倩,来自120617班,我们组7个成员中唯一一个6行政班以外的成员.为了达成组队条件,彭 ...