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. python3实现合并两个有序数组

    很早就听同学和师兄经常说刷题很重要,然而编程能力一直都很渣的我最近才开始从leetcode的初级算法开始.今天遇到的这道题虽然很简单,因为是头一次用自己的方法速度还不错,特此记录一下,还大神们请不要嘲 ...

  2. Netty源码分析第2章(NioEventLoop)---->第8节: 执行任务队列

      Netty源码分析第二章: NioEventLoop   第八节: 执行任务队列 继续回到NioEventLoop的run()方法: protected void run() { for (;;) ...

  3. kubeadm 线上集群部署(一) 外部 ETCD 集群搭建

      IP Hostname   192.168.1.23 k8s-etcd-01 etcd集群节点,默认关于ETCD所有操作均在此节点上操作 192.168.1.24 k8s-etcd-02 etcd ...

  4. 机器学习算法 --- Naive Bayes classifier

    一.引言 在开始算法介绍之前,让我们先来思考一个问题,假设今天你准备出去登山,但起床后发现今天早晨的天气是多云,那么你今天是否应该选择出去呢? 你有最近这一个月的天气情况数据如下,请做出判断. 这个月 ...

  5. vi/vim命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/mondol/p/vi-examples.html 进入vi vi filename # 打开或新建文件,并将光标置于第 ...

  6. maven实战读书笔记（一）

    环境变量设置 MAVEN_HOME:G:\maven-3.2\apache-maven-3.2.5 Path: G:\maven-3.2\apache-maven-3.2.5\bin 其实正确的设置应 ...

  7. sublime编写markdownm

    sublime编写markdownm 以前用有道云笔记,找了半天更改字体大小,结果还找不 到,那个字实在是太小了,像我这种有强迫症的患者,实 在受不了简约风格的有道云,所以上网找了与和诺插件并 受到一 ...

  8. Scrum Meeting 10 -2014.11.16

    开始进入大项目的整合阶段,平时和其他两个小组交流较少,整合难度还是存在的. 在具体整合前,让开发人员添加了些必要的注释,优化代码结构,方便阅读. Member Today’s task Next ta ...

  9. 20135337朱荟潼Java实验报告二

    20135337朱荟潼 实验二 Java面向对象程序设计 一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L ...

  10. c# combobox向上展开

    1.问题情境:实际中的下拉框默认向下扩展,如果屏幕下方空间不足,会向上扩展. 向下扩展情况下,有时候会超出form窗体. 2.解决办法: 寻找相关属性无果. 退而求其次,重画item的框.发现Draw ...