您的位置：首页 > 其它

before和after的强大

2016-10-24 20:05 190 查看

前言：刚学他两个的时候，是用于清除浮动，而且曾单纯的以为俩只有这作用。

但看到几篇博客后，发现自己是多么的无知，他两个的强大远不止于此。

当然，这篇文章大多数是借鉴网上的实例，在加上自己的些许简介而成。

首先说明几点

　　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>

效果图：

总言：先总结到这吧，它的用处其实还有很多很多。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航