一些伪元素的小玩意儿
在shadow的处理上，text-shadow本身就能很好的完成投影效果
- text-shadow: #666 1px 1px 0;
用伪元素虽然可以完成一模一样的投影，但总归是多了一堆代码。
- .after{
- position: relative;
- display: block;
- color: #ff9900;
- margin:20px 100px;
- }
- .after:after{
- position: absolute;
- display: block;
- top:1px;
- left: 1px;
- font-size:16px;
- color: #666;
- content: attr(data-text);
- z-index: -1;
- }
不过，伪元素既然可以多出来可以控制的标签，必然可以实现更多的效果，比如下面这个demo里。。。。。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
font-size:16px;
line-height: 14px;
color: #333;
}
.after{
position: relative;
display: block;
color: #ff9900;
margin:20px 100px;
}
.after:after{
position: absolute;
display: block;
top:1px;
left: 1px;
font-size:16px;
color: #666;
content: attr(data-text);
z-index: -1;
}
.shadow{
display: block;
color: #ff9900;
margin:20px 100px;
text-shadow: #666 1px 1px 0;
}
.after-2{
position: relative;
display: block;
color: #ff9900;
margin:20px 100px;
overflow: hidden;
height: 14px;
}
.after-2:after{
position: absolute;
display: block;
top: 0px;
left: 0px;
color: #666;
content: attr(data-text);
z-index: 1;
overflow: hidden;
height: 7px;
}
.after-3{
position: relative;
display: block;
color: #ff9900;
margin:20px 100px;
overflow: hidden;
height: 14px;
}
.after-3:after{
position: absolute;
display: block;
top: 0px;
left: 0px;
color: #87CEFA;
content: attr(data-text);
z-index: 2;
overflow: hidden;
height: 4px;
}
.after-3:before{
position: absolute;
display: block;
top: 0px;
left: 0px;
color: #FF00FF;
content: attr(data-text);
z-index: 1;
overflow: hidden;
height: 10px;
}
</style>
</head>
<body>
<p class="shadow">shadow字体投影效果</p>
<p data-text="伪元素字体投影效果" class="after">伪元素字体投影效果</p>
<p data-text="伪元素字体效果" class="after-2">伪元素字体效果</p>
<p data-text="伪元素字体效果" class="after-3">伪元素字体效果</p>
</body>
</body>
</html>
提示：你可以先修改部分代码再运行。
腾讯云开发者
