:before 和 :after的多用途实践 — 基础篇

FEWY

已于 2024-04-06 21:37:57 修改

阅读量970

点赞数 1

分类专栏： CSS 前端简单说文章标签： css before after 内容生成 content

于 2017-05-13 09:54:31 首次发布

本文链接：https://blog.csdn.net/fe_dev/article/details/71775624

版权

前端简单说同时被 2 个专栏收录

45 篇文章 20 订阅

订阅专栏

CSS

17 篇文章 1 订阅

订阅专栏

说明

CSS 伪元素用于向某些选择器设置特殊效果
在CSS中，伪元素，是一个很有趣的东西，而:before和 :after，这两个伪元素是我在开发中用到的比较多的，也是在许多系统和库中见到的比较多的，这篇博客先来讲讲这两个伪元素的基础知识！

解释

:before

:before 选择器向选定的元素前插入内容。
使用 content 属性来指定要插入的内容。
代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
     p:before{
	   content:"这里是生成的内容";
	 }
  </style>
 </head>
 <body>
     <p>(前)</p>
 </body>
</html>

效果图
这里写图片描述

:after

:after 选择器向选定的元素之后插入内容。
使用content 属性来指定要插入的内容。
代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>

     p:after{
	   content:"这里是生成的内容";
	 }

  </style>
 </head>
 <body>
     <p>(后)</p>
 </body>
</html>

效果图
这里写图片描述

这种方式就是，内容生成，作用就是使用CSS的方式，向现有的标记中增加新的内容，看上去似乎也没什么难度，content就是生成的内容，before就是在元素之前插入内容，after就是在元素之后插入内容，
然而，我们要知道，content的值，并不是只能是 string，看看下面这张来自菜鸟教程的图，就知道了。

这里写图片描述

这里，我们说说几个比较有趣的 content 的值，其他的值大家可以自己试试
先来看取值 counter，也就是计数器，看名字也大概能猜到他是干嘛的了，计数。

我们要想用计数器，先要有一个计数器，有了计数器，还需要告诉他，每一次，需要计几个数，记一个数，就像这样，1,2,3,4，记两个数，就像这样2,4,6,8，然后我们还需要找一个地方用计数器。

所以要用计数器，也就是三个步骤
1、声明计数器
属性：counter-reset
作用：创建或重置一个或多个计数器
取值：名称初始值;
例

counter-reset:c1 0;
counter-reset:c1 0 c2 10;

注意：

初始值可以省略，省略的话为0

counter-reset:c1;
counter-reset:c1 c2;

哪个元素使用计数器，哪个元素就不声明，简单说，谁用，谁就不声明，不然会出现计数器一直显示同一个数的情况。

2、设置计数器的增量(变化范围)
属性：counter-increment
取值：计数器名增量值;
作用：设置某个选择器每次出现的计数器的增量，增量值不写默认增量为1
例

counter-increment:c1 1;
counter-increment:c1;

注意：
哪个元素使用，在哪个元素中声明增量

3、使用计数器
函数：counter(name[, style]);
配合着 content 属性一起使用
name就是用counter-reset声明的计数器的名称
style是可选的参数，他的值也就是list-style-type支持的那些值

这里写图片描述

详情参考 http://www.runoob.com/try/try.php?filename=trycss_list-style-type_all

代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
		.counter{
		    counter-reset:c;   //创建计数器 c
		}
		.increment:before{
		    content:counter(c)"、"; //使用计数器c，后面还加了 、
		    counter-increment:c;   //默认增量为1
		}
  </style>
 </head>
 <body>
      <div class="counter">
	        <div class="increment">before</div>
			<div class="increment">内容</div>
			<div class="increment">after</div>
	  </div>
 </body>
</html>

效果图

这里写图片描述

继续看 content 取值 attr 的情况
代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
		div:before{
		  content: attr(data-name);//获取元素data-name属性值，当作content内容
		}
  </style>
 </head>
 <body>
	  <div data-name="自定义属性"></div>
 </body>
</html>

效果图

这里写图片描述

简单说，attr就是用来获取属性值的，content:attr(属性名);
接着再看一个 url
代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
       div:before{
	       content:url(img/3.jpg);
	   }
  </style>
 </head>
 <body>
     <div></div>
 </body>
</html>

效果图

这里写图片描述

我们看到这张图，被直接读了出来，这里有一些要注意的

不能修改图片的width和height，图片是多大，就显示多大，width和height失效，如果想改变图片大小，可以用图片处理软件，比如PS
图片不能进行重复或平铺，也就是说，你没法直接对这张图进行什么有用的操作

总结

到此，算是把这两个伪元素的基础知识说完了，这些只是基础，应该算是比较好理解的，下一篇我们开始，看看他们到底有什么好玩的！

:before 和 :after的多用途实践 — 提升篇

FEWY

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
:before 和 :after的多用途实践 — 基础篇

说明CSS 伪元素用于向某些选择器设置特殊效果在CSS中，伪元素，是一个很有趣的东西，而:before和 :after，这两个伪元素是我在开发中用到的比较多的，也是在许多系统和库中见到的比较多的，这篇博客先来讲讲这两个伪元素的基础知识！解释:before :before 选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容。代码&lt;!doctype html&gt;
复制链接

扫一扫