伪元素（送上周慧敏《最爱》）

最新推荐文章于 2021-08-04 07:32:10 发布
最新推荐文章于 2021-08-04 07:32:10 发布
阅读量174 收藏
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/88898401
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 使用伪元素来表示元素中的一些特殊的位置
			 */
			/*
			 * 为P中的第一个字符设置一个特殊的样式
			 */
			
			p:first-letter {
				color: red;
				font-size: 20px;
			}
			/*
			 * 为p标签中的第一行背景颜色为黄色
			 */
			
			p:first-line {
				background-color: yellow;
			}
			/*
			 * :before表示元素最前边的部分
			 * 一般before都结合content这个样式一起用
			 * 通过content可以向before或after的位置添加一些内容
			 * 
			 * after表示元素的最后位置
			 */
			
			p:before {
				content: "周慧敏是大美女！";
				color: chartreuse;
			}
			
			p:after {
				content: "周慧敏是大美女！";
				color: cyan;
			}
		</style>
	</head>

	<body>
		<p>
						天空一片蔚蓝
			清风添上了浪漫
			心里那份柔情蜜意似海无限
			在那遥远有意无意遇上
			共你初次邂逅谁没有遐想
			诗一般的落霞
			酒一般的夕阳
			似是月老给你我留印象
			斜阳离去朗月已换上
			没法掩盖这份情欲盖弭彰
			这一刹情一缕
			影一对人一双
			那怕热炽爱一场
			潮汐退和涨
			月冷风和霜
			夜雨的狂想
			野花的微香
			伴我星夜里幻想
			方知不用太紧张
			没法隐藏这份爱
			是我深情深似海
			一生一世难分开
			难改变也难再
			让你的爱满心内
			MUSIC
			在那遥远有意无意遇上
			共你初次邂逅谁没有遐想
			诗一般的落霞
			酒一般的夕阳
			似是月老给你我留印象
			斜阳离去朗月已换上
			没法掩盖这份情欲盖弭彰
			这一刹情一缕
			影一对人一双
			那怕热炽爱一场
			潮汐退和涨
			月冷风和霜
			夜雨的狂想
			野花的微香
			伴我星夜里幻想
			方知不用太紧张
			没法隐藏这份爱
			是我深情深似海
			一生一世难分开
			难改变也难再
			让你的爱满心内
			潮汐退和涨
			月冷风和霜
			夜雨的狂想
			野花的微香
			伴我星夜里幻想
			方知不用太紧张
			没法隐藏这份爱
			是我深情深似海
			一生一世难分开
			难改变也难再
			让你的爱满心内
			让我的爱全给你
			全给我最爱
			地老天荒仍未改
		</p>
	</body>

</html>

 

chen_zan_yu_
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 伪元素原理,CSS伪类伪元素详解
weixin_33216825的博客
05-30 1497
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越...
伪元素写竖线_CSS的伪类和伪元素
weixin_32515143的博客
01-17 2206
之前介绍了8种选择器,基本上可以应对大部分的开发需求，但是如果不会使用伪类和伪元素，就跟下面的图差不多，后面会摔的。伪元素和伪类虽然不是特别常用，但是，很好用，可以帮你省掉很多无用功，效果还好。下面直接进入正题，尽量用最小的篇幅让人明白如何使用它们。...1.伪元素和伪类的区别伪元素和伪类都是为了给一些特殊需求加样式，定义上基本一致。伪类像类选择器一样给已存在某个元素添加额外的样式；伪元素则是给自...
尚硅谷web前端工程师1000集学习笔记18
qq_38547320的博客
02-13 123
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 为div中的span设置一个颜色为绿色 * 后代元素选择器 * -作用： ...
css中什么是伪元素,CSS伪元素是什么？
weixin_28733933的博客
08-04 1631
什么?伪元素?之前不是说了伪类吗，怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵，其实伪类和伪元素是两个不同的概念，今天小编就为大家介绍一下伪元素。一、什么是伪元素css伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。二、语法伪元素的语法：selector:pseudo-element{property:value;}标签：伪元素{性质:值;}CSS类也可以...
css伪元素实现下划线
weixin_44727080的博客
03-18 4108
前言： css伪元素实现下划线效果，用一个border-bottom+伪元素实现双重下划线效果 效果图： 实现代码： .titleT{ position: relative; font-size: 28px; width: 112px; height: 44px; line-height: 40px; text-align: center; border-bottom:2px solid #5A8...
JS控制伪元素的方法汇总
10-22
在JavaScript中，对伪元素进行控制并非直接通过DOM操作，而是通过间接的方式影响它们的样式。伪元素，如`:before`和`:after`，在HTML文档中并不存在，因此不能像常规DOM元素那样直接选择和操作。这篇文章主要汇总了...
CSS利用伪元素实现导航栏斜线分隔
09-24
伪元素是CSS中用于选择文档中的特定部分，但这些部分并不是实际的DOM元素。常见的伪元素有`:before`和`:after`，它们分别在元素内容之前或之后插入内容。在这个场景下，我们将使用`:before`来插入斜线。 在给定的...
jQuery修改CSS伪元素属性的方法
10-25
CSS伪元素不是DOM元素，因此你无法直接选择到它们。下面与大家分享两种不错的修改方法，需要的朋友可以参考下
使用CSS伪元素实现文字部分变色的方法
09-25
这可以通过CSS伪元素来实现。本文将详细介绍如何利用CSS的`:before`和`:after`伪元素来达到这样的效果，并提供相关的基础知识讲解。 首先，让我们理解CSS伪元素的概念。伪元素是CSS中用于选择文档中的某些特定部分...
CSS中的几个伪元素使用介绍
09-25
总结一下，CSS伪元素`::before`和`::after`提供了在元素内容前后添加额外内容的灵活性，而`::first-child`则允许我们对元素集合中的第一个元素应用特定样式。这些工具在页面布局和美化时非常有用，尤其是在需要批量...
css外部样式
chen_zan_yu_的博客
03-10 4062
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;CSS&lt;/title&gt; &lt;!-- 也可以将CSS样式编写到head中的style的标签里 将样式编写的style标签中，然后通过css选择器选中指定元素
使用Canvas画两条线
chen_zan_yu_的博客
06-23 2373
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> functi...
css---使用列表和列表属性创建纵向菜单
chen_zan_yu_的博客
05-24 2218
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用列表及css属性创建纵向菜单</title> <style type="text/css"> body{ margin: 10px; font-size:...
css---有序列表+无序列表(37)
chen_zan_yu_的博客
04-03 1093
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 列表就相当于去超市购买物时的那个购物清单 在HTML也可以创建...
css---使用display:inlie-block实现图片横排
chen_zan_yu_的博客
05-24 1029
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用display:inlie-block实现图片横排</title> <style type="text/css"> body{ margin: 0px;/*重置b...
css~~~定义列表
chen_zan_yu_的博客
04-05 1017
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> <!-- 定义列表用来对一些词汇或内容jin'xing 定义 使用dl来...
css---边框简写属性
chen_zan_yu_的博客
04-19 941
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; backgro...
css---浏览器默认样式
chen_zan_yu_的博客
05-01 675
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 浏览器为了在页面中没有样式时，也可以让页面有一个比较好的显示效果 * 所以为很多的...
HTML&CSS基础_框架集
chen_zan_yu_的博客
06-21 593
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 作者：1395314176@qq.com 时间：2019-...
css伪元素上怎么使用transform
最新发布
03-28
要在伪元素上使用transform属性，首先需要为伪元素设置content属性，以便生成伪元素的内容。然后，通过在伪元素的样式规则中添加transform属性来应用变换效果。 下面是一个示例，展示了如何在伪元素上使用transform...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值