css3中before和after伪类的使用

ゞ浴缸里的玫瑰 2022-05-09 02:20 116阅读 0赞

对网页元素批量的加预定义效果

content中放的是16进制unicode编码  
比如「我」的unicode是6211（16进制）,content:"我" 和 content:"\\6211" 的含义是一样的

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<style>
    	/*两人的对话*/
    	.a::before
    	{
    		content:"顾客说";	
    		color:red;
    		font-weight:bold;
    		margin-right:10px;
    	}
    	.b::after
    	{
    		content:"老板说";
    		background-color:#ccc;
    		border-radius:5px;
    		color:blue;
    		font-weight:bold;
    		margin-left:10px;
    	}
    	/*连接*/
    	a{
    		position: relative;
    		margin-right:50px;
    		text-decoration:none;
    	}
    	a:hover::before，a:hover::after{position: absolute;}
    	a:hover::before{
    		content:'《《《';
    		left:-20px;
    	}
    
    	a:hover::after{
    		content:'》》》';
    		right:-20px;
    	}
    </style>
    </head>
    
    <body>
    
    	<p class='a'>老板，请问这条裤子多少钱？</p>
    	<p class='b'>180元，广州正宗货，要不要？</p>
    	<p class='a'>我先看看……</p>
    	<p class='b'>别看了，东西是好东西，给你优惠点178元。</p>
    	<p class='a'>这也叫优惠啊？</p>
    	<p class='b'>呵呵，好吧就160元，这回可以了吧。</p>
    	<br><br>
    	<p>鼠标放到a标签上试试</p>
    	<a href="#">baidu.com</a>
    	<a href="#">blog.csdn.net</a>
    	<a href="#">163.com</a>
    
    </body>
    </html>

推荐阅读：[http://www.sohu.com/a/148998090\_99897596][http_www.sohu.com_a_148998090_99897596]

[http_www.sohu.com_a_148998090_99897596]: http://www.sohu.com/a/148998090_99897596

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关伪类元素:before 和 :after

关于伪类元素:before和:after 原文地址： [http://www.hulufei.com/post/about-before-and-after-pseudo

今天药忘吃喽~/ 2022年09月20日 08:53/ 0 赞/ 160 阅读

相关深入研究 CSS 中的 ::before 和 ::after 伪元素

![16ef48fb825367da8dc56b8371765940.png][] 原文 | https://betterprogramming.pub/mastering-

今天药忘吃喽~/ 2022年09月02日 05:21/ 0 赞/ 149 阅读

相关伪元素::before和::after

2.10.3　伪元素::before和::after 对于“::before”和“::after”来说，大家并不多见，但“:before”和“:after”，或许不会陌生，因

朱雀/ 2022年08月19日 14:10/ 0 赞/ 164 阅读

相关伪元素::after和::before

::after 是一个CSS伪元素，使用 ::after ，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正

左手的ㄟ右手/ 2022年05月27日 02:14/ 0 赞/ 164 阅读

相关学习使用：before和：after伪元素

第一，“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。第二，在内容模块中提到，伪元素如果没有设置“content”属性，伪元素是无用的。

阳光穿透心脏的1/2处/ 2022年05月14日 04:53/ 0 赞/ 191 阅读

相关 css3中before和after伪类的使用

对网页元素批量的加预定义效果 content中放的是16进制unicode编码比如「我」的unicode是6211（16进制）,content:"我" 和 conten

ゞ浴缸里的玫瑰/ 2022年05月09日 02:20/ 0 赞/ 117 阅读

相关 CSS伪元素after、before使用示例（三）

　　用户:after元素实现小旗的燕尾效果。如下图所示： \[align=center\] \[img\]http://dl2.iteye.com/upload/att

喜欢ヅ旅行/ 2022年04月08日 09:47/ 0 赞/ 220 阅读

相关 CSS伪元素after、before使用示例（二）

　　通过对:after、:before伪元素的控制，可以发挥相像力实现很多效果，如： \[align=center\] \[img\]http://dl2.iteye.

红太狼/ 2022年04月08日 09:22/ 0 赞/ 141 阅读

相关 CSS伪元素after、before使用示例（一）

　　大家都知道使用CSS可以容易使用以下效果。 \[align=center\] \[img\]http://dl2.iteye.com/upload/attachme

逃离我推掉我的手/ 2022年04月08日 09:20/ 0 赞/ 147 阅读

相关 CSS伪元素after、before使用示例（四）

　　使用:before、:after伪元素，添加分割线。不用增加DOM元素，只需在对应元素上添加样式即可。 /元素前、后画线的处理/ .hra,.

拼搏现实的明天。/ 2022年04月06日 01:38/ 0 赞/ 158 阅读