前端学习 -- Css -- 伪元素
- :first-letter 表示第一个字符
- :first-line 表示文字的第一行
- :before 选中元素的最前边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容。
- :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 -- 伪元素的更多相关文章
- CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素
CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...
- 前端学习 -- Css -- 伪类
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...
- 前端学习 --Css -- 子元素的伪类
:first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...
- 前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 学习CSS之如何改变CSS伪元素的样式
一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 ...
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
随机推荐
- Lwip：原生态的Linux socket应用如何移植到Lwip上
lwIP - A Lightweight TCP/IP stack 在上一篇中,我们了解到在OpenFastPath上如何移植原生态的Linux Socket应用程序,那么,对于另外一个老牌的小型TC ...
- Kettle日常使用汇总整理
Kettle日常使用汇总整理 Kettle源码下载地址: https://github.com/pentaho/pentaho-kettle Kettle软件下载地址: https://sourcef ...
- 简介make命令和makefile文件
一.为什么要用到 make 命令和 makefile 文件 在 Linux 下编写一个程序,每次编译都需要在命令行一行一行的敲命令.如果是一个很小的程序还好说,命令不怎的复杂,编译速度也挺快,但是对于 ...
- PropertyGrid中的枚举显示为中文
参考http://www.cnblogs.com/yank/archive/2011/09/17/2179598.html 在上述文档的基础上做了改进.从EnumConverter类派生 显示效果: ...
- axios常用操作
axios常用操作 一:函数化编程 1:编写可复用的方法 axios(config)的方法中,有必须的url参数和非必须的options参数.所以我们可以先写一个接受这两个参数的方法,在这个方法中我们 ...
- Beta冲刺第二周王者荣耀交流协会第五次会议
1.立会照片 成员:王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐. master:王磊 2.时间跨度: 2017年11月21日 15:00 — 15:17,总计17分钟. 3.地点: 一食堂 ...
- No.11_功能规格说明书
功能规格说明书 • 基本目标 为用户提供更加便捷和人性化的闹钟提醒服务,以群组为单位规划时间安排与分配,对于个人用户,实现个人的设置闹钟,取消闹钟的操作,这些操作将会上传至数据库,并被同步到所有的客户 ...
- 面向对象OO第1-3次作业总结
面向对象OO第1-3次作业总结 学习OO已经四周了,对OO以及JAVA的编程也算终于了解了一丢丢.现在做完了三次的编程作业,对前三次的作业做一次总结. 第一次作业 ------------------ ...
- Linux 环境下Web环境搭建————ActiveMQ
1.下载安装包http://activemq.apache.org/activemq-5143-release.html 2.解压至指定目录 bin目录下为执行脚本 (脚本无法执行需要修改权限(chm ...
- 冲刺One之站立会议7 /2015-5-20
2015-5-20 在登陆成功之后要实现的是聊天界面的交互过程,不同的IP进行信息和数据的传递,这方面我们上学期Java实验里面有过相关的内容,我们把它拿过来改了一下格式,试着看能不能成功,目前还没实 ...