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

first-letter demo:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             /*:first-letter 表示第一个字符*/
  8.             p:first-letter{
  9.                 color: red;
  10.                 font-size: x-large;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <p>
  16.             不知道喜欢你什么，实在不知道，如果确定知道喜欢你什么，是不够喜欢你。因为不确定具体喜欢你什么，所以喜欢你所有一切及其他。
  17.         </p>
  18.     </body>
  19. </html>

效果：

first-line demo:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             /*:first-line 表示文字的第一行*/
  8.             p:first-line{
  9.                 color: red;
  10.                 font-size: x-large;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <p>
  16.         我们是世人最好的朋友，我们是世人最差的情人，我们彼此相爱，就是为民除害。
  17.         </p>
  18.     </body>
  19. </html>

效果图：

:before :after demo:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             /*:first-line 表示文字的第一行*/
  8.             p:before{
  9.                 content: "嘻嘻:";
  10.                 color: red;
  11.                 font-size: x-large;
  12.             }
  13.             P:after{
  14.                 content: "哈哈";
  15.                 color: green;
  16.                 font-size: x-large;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <p>
  22.         我们是世人最好的朋友，我们是世人最差的情人，我们彼此相爱，就是为民除害。
  23.         </p>
  24.     </body>
  25. </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.6】python打包成exe

    D:\python_test>pip3 install pyinstaller…………D:\python_test>pyinstaller -F -w ui.py INFO: PyInst ...

  2. 从零开始的Python学习Episode 23——进程

    ---恢复内容开始--- 进程 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用 ...

  3. umount命令详解

    基础命令学习目录首页                                    umount 用来卸载设备 -a:卸除/etc/mtab中记录的所有文件系统: -h:显示帮助: -n:卸除 ...

  4. 小米6x抓包小程序https请求

    1. charles安装证书,手机设置代理等这里不多讲了, 请进入下面链接查看详细 https://blog.csdn.net/manypeng/article/details/79475870 2. ...

  5. Nginx 配置优化

    一.开启Gzip 1.参数 gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 2;gzip_types text/plain ...

  6. iOS开发学习-资源打包

    图片是被放到Images.xcassets中 1.部署版本在>=iOS8的时候,打包的资源包中的图片会被放到Assets.car 图片被压缩: 2.部署版本在<iOS8的时候,打包的资源包 ...

  7. Jsp----注册登陆

    一.需求分析 目前99%的网站都会有用户的登陆注册界面(用户就是一切嘛).其需求可想而知. 二.设计过程及所查寻资料 通过寻找上课老师所给予的课件,搜寻相关内容:目前以获取相关有java web关于w ...

  8. HDU 4529 郑厂长系列故事——N骑士问题 状压dp

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4529 郑厂长系列故事--N骑士问题 Time Limit: 6000/3000 MS (Java/O ...

  9. C语言：一个能自动生成小学四则运算题目的程序

    完成这个程序,半个小时内完成了,这个程序,可以自动生成小学简易的四则运算,提供菜单让用户选择,然后判断加减乘除,判断答对答错的题目个数,用户同时也可以重新选择继续答题或重新选择或退出程序. 源程序: ...

  10. java编程的一些注意事项

    下面是参考网络资源和总结一些在java编程中尽可能做到的一些地方 1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例 ...