css3 before after

一、介绍

 

  • 伪类,采用单冒号写法,即 ‘:’。常见的有:hover, :link, :active, :target, :not(), :focus。
  • 伪元素,采用双冒号写法,即 ‘::’。常见的有::before, ::after, ::first-letter, ::first-line, ::selection。

注意:css2中,伪元素before和after写为:before, :after

本文主要介绍 伪元素::before和::after。伪元素的意思就是元素不是在DOM中生成的,而是在浏览器渲染引擎渲染CSS的时候渲染上去的, 所以不能通过常规的js去操作它。before 和 after其实就是附着在元素前后的伪元素。默认情况下,伪类元素的display是默认值inline,可以通过设置display:block等来改变。

通过::before, ::after等我们可以实现多种效果,比如实现图标、一个字多种颜色、多边形、一个标签设置多张背景图片等效果。具体使用方法请看下面。

 

二、content属性

 

  • 用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。
  • content必须有值,至少是空。
p::after {
    content: ""
}
p::before{
    content: "↗";
    color: #000;
    display: block;
    width: 100px;
    height: 100px;
}

 

  • 通过attr()调用当前元素的属性,可以是自定义属性。
<a href="http://abinggo.com"> AbingGo </a>
a::after{
    content: "(" attr(href) ")";
}
<p data-src="AbingGo"></p>
p::after{
    content: attr(data-src); 
}

 

  • url() / uri() – 用于引用媒体文件。
a::before {
    content: url("http://www.abinggo.com/a.jpg");
}

 

  • 调用计数器,可以不使用列表元素实现序号功能。配合counter-increment和counter-reset属性使用。

.container{
    counter-reset: section;
}
h1::before{
    counter-increment: section;
    content:counter(section) "、";
}

<div class="container">
    <h1>AbingGo 1</h1>
    <h1>AbingGo 2</h1>
    <h1>AbingGo 3</h1>
</div>

三、实现多种效果

  • 三角形
.par{
	width: 0;
	border-top: 100px solid #19f305; 
	border-right: 100px solid #f33505; 
	border-bottom: 100px solid #2804f4; 
	border-left: 100px solid #000; 
	margin: auto;
}

<div class = "par"></div>

四个三角形

 

  • 图标
.logo {
  	position: relative;
	width: 90px;
  	height: 70px;
  	border: 25px solid red;
  	border-bottom-left-radius: 50%;
  	border-bottom-right-radius: 50%;
}

.logo:after {
	content: "";
  	width: 25px;
        height: 25px;
  	position: absolute;
  	top: -25px;
  	right: -25px;
  	background: #fff;
}

<div class="logo"></div>

 

  • 一个字多种颜色
.font {
    display: inline-block;
    position: relative;
    font-size: 80px;
    line-height: 80px;
    color: #000;
    overflow: hidden;
    white-space: pre;
}

.font:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #f00;
    width: 30%;
    content: attr(data-font);
    overflow: hidden;
}

  <div class="font" data-font="等">等</div>
  <div class="font" data-font="你">你</div>
  <br>
  <div class="font" data-font="来">来</div>
  <div class="font" data-font="战">战</div>

 

 

 

本文只为自己总结学习。有错误或者误导的地方请指正。

One comment

css实现一个字多种颜色 – AbingGo

 在2018年 四月 15日 1:04 下午

[…] 通过before、after伪元素,具体::before和::after伪元素的用法请参考我的另一篇文章CSS3 before after。 […]

 回复

发表评论