前端学习 -- 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/ ...
随机推荐
- 傻瓜式搭建私有云就用这两组合：宝塔+kodexplorer
介绍 宝塔面板:是一款linux/windows平台均可使用的服务器管理软件,自带环境包,主要基于centos操作系统,可一键包装nginx.apache.php.mysql.pureftpd.php ...
- basename命令详解
基础命令学习目录首页 摘要:前言bashname命令用于获取路径中的文件名或路径名(获取的时候叶子节点的元素内容)常见用法举例basenamepath获取末尾的文件名或路径名1:[aliyunzixu ...
- linux cat显示若干行
[一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1000 [二]显示1000行到3000行 cat ...
- 【Alpha】阶段第十次Scrum Meeting
[Alpha]阶段第十次Scrum Meeting 工作情况 团队成员 今日已完成任务 明日待完成任务 刘峻辰 登出接口 编写后端说明文档 赵智源 编写脚本实现测试的持续集成 前测试点页面跳转逻辑测试 ...
- 炸弹人NABCD分析
团队项目NABCD分析结果 N(Need 需求):现在安卓手游比较热门,所以我们想要编写这样一款软件应用于学生,让学生可以在课余时间放松心情,缓解学习压力. A (Approach 做法):使用Coc ...
- 课堂练习 psp表
项目计划总结表: 日期 编程 完善程序 测试程序 参考资料 日总结 3.20 18:00---19:30 1.5 3.21 9:30----10:00 10:00---10:30 ...
- bata3
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...
- 关于mybatis的思考（3）——ResultMaps的使用
ResultMap元素在mybatis中非常重要,目的是告诉mybatis将从结果集中取出的数据转换为开发者需要的对象. UserMapping.xml <!-- selectAll操作 ...
- JAVA之路(二)
学道酬勤,这是第二次学习JAVA,感觉如醍醐灌顶一样,理解很多思想和道理. 本博只是自己对JAVA的一些理解,具体定义以及用法百科里有. 我为什么在博客园内记录自己的学习过程呢,因为我想有人知道我在学 ...
- 11th 单元测试工具JUnit的学习
1.写好一个简易的四则运算的程序 UnitTest类文件: public class UnitTest { int a; int b; int answer;//正确答案 public int plu ...