css3中before和after伪类的使用

最新推荐文章于 2024-07-11 21:11:19 发布

idjl

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量1w

点赞数 1

分类专栏： html，css学习笔记文章标签： css3 伪类 before after

本文链接：https://blog.csdn.net/u010071211/article/details/82901103

版权

html，css学习笔记专栏收录该内容

32 篇文章 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>