前端学习 -- 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/ ...
随机推荐
- Netty源码分析第1章(Netty启动流程)---->第2节: NioServerSocketChannel的创建
Netty源码分析第一章: Server启动流程 第二节:NioServerSocketChannel的创建 我们如果熟悉Nio, 则对channel的概念则不会陌生, channel在相当于一个通 ...
- Firefox浏览器【书签工具栏】里的网址链接无法删除的解决办法
今天使用Firefox浏览器,发现有一些我从来都没有访问的网站出现在[书签工具栏], 也不知道是什么原因被添加进来的(可能是安装某个插件被插的),于是点删除,发现还删除不了,很是老火,研究了一番,把删 ...
- 使用Zabbix的SNMP trap监控类型监控设备的一个例子
本文以监控绿盟设备为例. 1.登录被监控的设备的管理系统,配置snmptrap地址指向zabbix服务器或代理服务器. snmptrap地址也叫陷阱. 2.验证是否能在zabbix服务器或代理服务器上 ...
- 最新Microsoft Edge！使用chromium内核
2018年11月,微软宣布其Edge浏览器将采用Chromium引擎,意味着微软的Edge浏览器以失败告终. 但令人振奋的是,新版Edge也许会“死而复生”.在使用了Chromium内核后,Edge各 ...
- 从零开始的Python学习Episode 18——面向对象（1）
类与对象 类即类别.种类,是面向对象设计最重要的概念,对象是特征与技能的结合体,而类则是一系列对象相似的特征与技能的结合体. 类的定义 class 类名: 属性1 属性2 def 方法(self,ar ...
- Oracle VM VirtualBox 无法卸载 更新 和修复
好久没更新Oracle VM VirtualBox 突然发现不能更新了 提示要某个msi文件,回想起来好像是被某个清理垃圾的软件清理掉了. 于是根据提示的版本号网上搜了种子又把安装包下载回来 在命令行 ...
- XSS攻击防御篇
前言 上篇文章中提到了 XSS 攻击,而且,也从几个方面介绍了 XSS 攻击带来的严重影响.那么,这篇文章中,主要是针对 XSS 攻击做一个基本的防御,看看可以通过几种方式来修复这个特别常见的安全 ...
- 局域网传输-LED灯搭建局域网：数据传输可达每秒3Gb
一 : LED灯搭建局域网:数据传输可达每秒3Gb 我们之前介绍了利用可见光通讯技术,通过LED灯光实现精准室内定位的例子.实际上,这种灯泡和技术的用途不止于此,比如,它还能进行无线网络传输. 最近, ...
- 第7讲：SQL Server简介
SQL Server是微软公司提供的一款关系数据库管理系统. 操作数据库有两种方式:SQL语句和可视化的SSMS,该文章所有操作均基于SSMS. 一.SSMS(SQL Server Managemen ...
- BufferedInputStream 缓冲输入字节流 -------上
package com.BufferedInputStreamUse; import java.io.BufferedInputStream; import java.io.File; import ...