css3中before和after伪类的使用

ゞ浴缸里的玫瑰 2022-05-09 02:20 145阅读 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 条评论，145人围观）

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

相关阅读

相关 CSS伪类&伪元素？:hover，::before，::after使用（举例）

文章目录什么是CSS伪类？什么是伪元素？怎么用伪元素？可以做些什么？ ::before，在标签选择器之前添加内容，::a

布满荆棘的人生/ 2024年02月17日 12:30/ 0 赞/ 51 阅读

相关 css伪元素:before和:after用法详解

css的`伪元素`，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css

一时失言乱红尘/ 2023年02月09日 13:18/ 0 赞/ 24 阅读

相关 CSS伪类before和after的应用

最近看到一些关于伪类的文章和实例，感觉印象不怎么深刻，今天在项目中出现了效果如图，记下来 ![20150721182547590][] 在文字两遍各有一条横线. 1

喜欢ヅ旅行/ 2023年02月08日 12:56/ 0 赞/ 14 阅读

相关伪类元素:before 和 :after

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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