004 css3伪元素选择器after、before

最新推荐文章于 2022-04-10 11:38:13 发布

陀陀吖

最新推荐文章于 2022-04-10 11:38:13 发布

阅读量132

点赞数

分类专栏： h5c3

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88937469

版权

h5c3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3伪元素</title>
	<style>

		/*找到p段落的第一个字*/
		p::first-letter{
			color: red;
		}
		/*找到p段落的第y一行字*/
		p::first-line{
			background-color: yellow;
		}
		/*可改变选择的文本背景颜色*/
		p::selection{
			background-color: pink;
		}


		/*重要!!!!!!!!!!!!*

		/*before和after*/
		div::before{         /*必须带content属性*/  

			content: "我";      /*将内容放在div的前面  内部插入*/   /*其实before是个盒子，行内盒子,,可以设置宽高等样式*/
			width: 100px;
			height: 100px;
			display: inline-block;      /*行内转为行内块才可以设置宽高*/
			background-color: pink;
		}

		div::after{
			content: "3岁了";
			background-color: red;      /*用于清除浮动 */
		}
		

		/*还可以在content里面放字体图标*/

		@font-face {     /*声明字体，引用字体*/
		  font-family: "icomoon";      /*这里的iconfont我们可以改，表示字体的官网*/
		  src: url('fonts/icomoon.eot?7kkyc2');
		  src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
		  url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
		  url('fonts/icomoon.woff?7kkyc2') format('woff'),
		  url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
		  font-weight: normal;     
		  font-style: normal;
		}

		div{
			font-family: 'icomoon';
		}
		div::after{
			content: "\e93a";
		
		}

	</style>
</head>
<body>
	<p>红色高跟鞋高品质MP3版原声带mp3免费下载_蔡健雅_128K无损...本页是歌曲红色高跟鞋高品质MP3版原声带歌曲mp3免费下载页面,如果您想试听红色高跟鞋高品质MP3版声带歌曲,那么就点击 红色高跟鞋高品质MP3版原声带在线试听...
	红色高跟鞋高品质MP3版原声带mp3免费下载_蔡健雅_128K无损...本页是歌曲红色高跟鞋高品质MP3版原声带歌曲mp3免费下载页面,如果您想试听红色高跟鞋高品质MP3版原声带歌曲,那么就点击 红色高跟鞋高品质MP3版原声带在线试听...
	红色高跟鞋高品质MP3版原声带mp3免费下载_蔡健雅_128K无损...本页是歌曲红色高跟鞋高品质MP3版原声带歌曲mp3免费下载页面,如果您想试听红色高跟鞋高品质MP3版原声带歌曲,那么就点击 红色高跟鞋高品质MP3版原声带在线试听...
	红色高跟鞋高品质MP3版原声带mp3免费下载_蔡健雅_128K无损...本页是歌曲红色高跟鞋高品质MP3版原声带歌曲mp3免费下载页面,如果您想试听红色高跟鞋高品质MP3版原声带歌曲,那么就点击 红色高跟鞋高品质MP3版原声带在线试听...	</p>


	<!-- before和after -->
	<div>今年</div>
</body>
</html>

陀陀吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
004 css3伪元素选择器after、before

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3伪元素</title> <style> /*找到p段落的第一个字*/ p::first-letter{ color: red; } /*找...
复制链接

扫一扫

专栏目录