使用::before与::after伪元素插入图标

最新推荐文章于 2024-08-09 16:06:18 发布

七里香777

最新推荐文章于 2024-08-09 16:06:18 发布

阅读量1.5k

点赞数

分类专栏：笔记 # CSS 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44286392/article/details/107781422

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

hpu.ico 在这里插入图片描述

同一目录下：
在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>before-after</title>
	<style>
	div{margin:50px;}
	div::before{
		content:url(hpu.ico);
		position:relative;
		bottom:-10px;
		left:-10px;
	}
	div::after{
		content:"";
		width: 0px;
		height: 0px;
		display: inline-block;
		border:10px solid transparent;
		border-bottom:20px solid red;
		position: relative;
		bottom:-8px;
		left:10px;

	}
	p{margin:50px;
		  width:200px;
		  height:50px;
		  background:green;
		  border-radius: 5px;

      }
      p::after{
      	content:"";
      	width: 0px;
      	height: 0px;
      	display:inline-block;
      	border:12px solid transparent;
      	border-top:12px solid green;
      	position:relative;
      	bottom:-50px;
      	left:85px;
      	
      }
	
	</style>
</head>
<body>
	<div>河南理工大学计算机学院</div>
	<p></p>
</body>
</html>