before和after的强大
前言：刚学他两个的时候，是用于清除浮动，而且曾单纯的以为俩只有这作用。
但看到几篇博客后，发现自己是多么的无知，他两个的强大远不止于此。
当然，这篇文章大多数是借鉴网上的实例，在加上自己的些许简介而成。
首先说明几点
1，before和after中的之前和之后是指的是标签的左右，类似于js中的insertbefore和insertafter
2,不适用于单标签，例如<img>、<input>。他俩意为添加，单标签无法添加，so。。。
下面总结几个
一，巧用before实现心形背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
position: relative;
top: 20px;
left: 20px;
color: #ff1f2d;
} h1:before {
position: absolute;
top:-50px;
font-size: 100px;
color: #abcdef;
content: "\2764";
z-index: -1;
} </style>
</head>
<body>
<h1>晨落梦公子</h1>
</body>
</html>
效果图：
附上content编码：http://www.shangxueba.com/jingyan/1806634.html
二、划入变亮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
position: relative;
top: 20px;
left: 20px;
color: #ffffff;
background: coral;
padding: 10px;
} span:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255, 255, .2);
z-index: 1;
} span:hover:after {
content: "";
}
</style>
</head>
<body>
<span>划入变亮</span>
</body>
</html>
三、实现行级元素换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span:after {
content: "\A";
white-space: pre;
}
</style>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</body>
</html>
效果图：
总言：先总结到这吧，它的用处其实还有很多很多。。。
before和after的强大的更多相关文章
- Postman - 功能强大的 API 接口请求调试和管理工具
Postman 是一款功能强大的的 Chrome 应用,可以便捷的调试接口.前端开发人员在开发或者调试 Web 程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的 Fi ...
- 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等
在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...
- 你从未知道如此强大的ASP.NET MVC DefaultModelBinder
看到很多ASP.NET MVC项目还在从request.querystring或者formContext里面获取数据,这实在是非常落后的做法.也有的项目建了大量的自定义的modelbinder,以为很 ...
- 虚拟机体验之 VirtualBox 篇 —— 性能强大的经典架构
前两篇体验了 QEMU 和经过 KVM 加速的 QEMU,并体验了第三方虚拟机管理工具 virt-manager,让我们见识了开源社区的强大和开源虚拟机软件的高质量和高性能.这一篇,我来剖析一下 Vi ...
- transformjs污染了DOM?是你不了解它的强大
原文链接: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得tra ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- 一款强大的Android网络渗透软件dsploit
dSploit是一款基于Android系统的功能十分全面强大的网络渗透工具,可以提供给网络安全工作人员检查网络的安全性.小黑这次主要使用了其中的"简易嗅探""会话劫持&q ...
- 5款强大的Java Web开发工具
1.WebBuilder这是一款开源的可视化Web应用开发和运行平台.基于浏览器的集成开发环境,采用可视化的设计模式,支持控件的拖拽操作,能轻松完成前后台应用开发:高效.稳定和可扩展的特点,适合复杂企 ...
- 比achartengine更加强大的Android图表控件。
比achartengine更加强大的图表控件MPAndroidChart. 详细使用及demo:http://www.see-source.com/androidwidget/detail.html? ...
随机推荐
- 【Web】写个HTML页面去调试HTTP接口方便些
现在越来越多的系统基本SOA的思想,业务由许多小系统通过远程调用的方式串连起来,其中HTTP的接口在远程调用的方式中颇为常见.看过一些开发人员写完一些接口后,要么按照正常情况调用几次就交给调用方,要么 ...
- hdu4992 Primitive Roots（所有原根）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4992 题意:给出n,输出n的所有原根. 思路:求出n的一个原根x,那么对于所以的i,i<phi( ...
- Cheatsheet: 2013 09.22 ~ 09.30
Other Python basics summary Another article about big O notation Mobile Getting Started with PhoneGa ...
- SQL 汉字转换成拼音首字母 首字母查
-- ============================================= -- 功能:汉字转换成拼音首字母 首字母查 -- ========================== ...
- 【转载】Visual Studio 2015 for Linux更好地支持Linux下的开发
原文:Visual Studio 2015 for Linux更好地支持Linux下的开发 英文原文:Targeting Linux Made Easier in Visual Studio 2015 ...
- 【转】雪崩光电二极管(APD)偏置电源及其电流监测
摘要:本文提供的参考设计用于实现APD偏置电源及其电流监测.基于MAX15031 DC-DC转换器,该电路能够将2.7V至11V范围的输入电压经过DC-DC电源转换器后得到一个70V.4mA电源. 下 ...
- source命令
source命令用法: source 文件名作用:在当前bash环境下读取并执行文件中的命令.注:该命令通常用命令“.”来替代.如:source .bash_rc 与 . .bash_rc 是等效的 ...
- nginx使用ssl模块配置HTTPS支持
默认情况下ssl模块并未被安装,如果要使用该模块则需要在编译时指定–with-http_ssl_module参数,安装模块依赖于OpenSSL库和一些引用文件,通常这些文件并不在同一个软件包中.通常这 ...
- namespace使用总结
1.防止引用文件中函数名相同,导致函数重定义错误: //test1.php <?php namespace foo; function func(){ echo "test1/func ...
- ZOJ-2362 Beloved Sons 最大权值匹配
题意:国王有N个儿子,现在每个儿子结婚都能够获得一定的喜悦值,王子编号为1-N,有N个女孩的编号同样为1-N,每个王子心中都有心仪的女孩,现在问如果安排,能够使得题中给定的式子和最大. 分析:其实题目 ...