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. Aria2 Linux 完整安装及使用教程

    Aria2 嘛,主要是用来离线下载,功能强大,支持 http/https 直链.ftp.电驴.磁力链接等等,且可以跨平台使用,配合网页端操作,简直是一代下载神器. 安装 Debian/Ubuntu: ...

  2. HTML学习1-Dom之事件绑定

    事件: 1.注册事件 a. <div onxxxx=””></div> b. document  .onxxxx= function()  //找到这个标签 2.this,触发 ...

  3. time命令详情

    基础命令学习目录首页 原文链接:https://blog.csdn.net/adaptiver/article/details/6596143?utm_source=blogxgwz3 linux下t ...

  4. lsmod命令详解

    基础命令学习目录首页 原文链接:http://blog.sina.com.cn/s/blog_e6b2465d0101fuev.html lsmod——显示已载入系统的模块 lsmod 其实就是lis ...

  5. 9.Hive Metastore Administration

    前言metastore参数metastore的基本参数metastore的额外参数客户端参数使用zk自动发现mestastore启动hive metastore服务 前言 本节讲metastore相关 ...

  6. jenkins设置定时任务

    每次都手动的构建项目显然不够方便,有时候需要定时地执行自动化测试脚本.例如,每天晚上定时执行 pjenkins.py 文件来运行自动化测试项目. 设置定时任务 前面已经创建的 “python test ...

  7. 【quickhybrid】Android端的项目实现

    前言 前文中就有提到,Hybrid模式的核心就是在原生,而本文就以此项目的Android部分为例介绍Android部分的实现. 提示,由于各种各样的原因,本项目中的Android容器确保核心交互以及部 ...

  8. React.js - 入门

    React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...

  9. cnblogs.com用户体验

    一.是否提供了良好的体验给用户(同时提供价值)? 首先我觉得博客园给我们这些用户提供了良好的用户体验,博客园提供了一个纯净的技术交流空间,在这里我们可以找到几乎所有与IT技术有关的博文,而且可以在这里 ...

  10. Chapter 11 软件演化

    软件一直在不断地演化发展,人们通常通过软件维护和软件再工程解决软件的缺陷.软件维护可以分为改正性维护.适应性维护和完善性维护几种类型.软件维护受开发过程影响大.软件维护困难大.软件维护成本高.软件维护 ...