伪元素,这不是有手就行
Posted 浪漫主义码农
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了伪元素,这不是有手就行相关的知识,希望对你有一定的参考价值。
伪元素
你以为这个火箭是一张图片吗?它只是四个div,其余都是伪元素实现的效果。
伪元素是什么呢?
字面上就可以了解,伪元素–伪装的元素,就是页面不存在的元素.,用于创建一些不在DOM树中的元素,并为其添加样式。
那么我们就要区分伪元素和伪类的区别?
有没有创建一个文档树之外的元素。
我们在css3规范中要求使用双冒号(::)表示伪元素,一个冒号(:)表示伪元素,以此来区分伪类和伪元素
伪元素的使用
伪元素只有以下这些:主要应用于 设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 p 元素之后插入内容。 |
::before | p::before | 在每个 p 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 p 元素的首字母。 |
::first-line | p::first-line | 选择每个 p 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
::before
在元素之前插入内容 一定要使用content属性,不然没有效果,值为字符串,可以是文字可以是路径。
例子:在p标签前面添加一个图标
<body>
<div class="main">
<p>浪漫主义码农</p>
</div>
</body>
<style>
*
padding: 0;
margin: 0;
.main
width: 300px;
height: 300px;
margin: 240px auto;
border: 1px solid red;
p::before
content: url('./tx.jpg');
margin-right: 10px;
</style>
效果:
::after
在元素之后插入内容
同样是上面的代码,我们把伪元素改为p::after,照片就显示在文字之后了。
一定要使用content属性,不然没有效果,值为字符串,可以是文字可以是路径。
伪元素当然也支持定位,这样我们就可以实现伪元素出现在父元素的任意位置了。
效果:
::first-letter
选择每个元素的首字母或文字,::first-letter
伪元素只适用于块级元素。
<body>
<div class="main">
<h2>浪漫主义码农</h2>
<p>今年100岁</p>
<h1>Good morning</h1>
</div>
</body>
<style>
*
padding: 0;
margin: 0;
.main
width: 300px;
height: 300px;
margin: 240px auto;
border: 1px solid red;
.main ::first-letter
background: rgb(30, 160, 199);
</style>
效果:
::first-line
选择每个元素的首行.::first-line
伪元素只能应用于块级元素.
例子:
<body>
<div class="main">
<h1>我来自中国,我喜欢打篮球。</h1>
</div>
</body>
<style>
*
padding: 0;
margin: 0;
.main
width: 300px;
height: 300px;
margin: 240px auto;
border: 1px solid red;
.main ::first-letter
background: red;
font-size: 2cm;
.main ::first-line
background-color: rgb(39, 214, 245);
</style>
效果:
::selection
选择用户选择的元素部分
例子:
<body>
<div class="main">
<p>本人也是经过了深思熟虑,在每个日日夜夜思考这个问题。 现在,解决一天掉多少根头发的问题,是非常非常重要的
了解清楚一天掉多少根头发到底是一种怎么样的存在,是解决一切问题的关键</p>
</div>
</body>
<style>
*
padding: 0;
margin: 0;
.main
width: 300px;
height: 300px;
margin: 240px auto;
border: 1px solid red;
.main ::selection
background: rgb(0, 238, 255);
color: sandybrown;
</style>
效果:
写在最后
伪元素了解起来很简单,但是应用确实非常的广泛,现在我们就来讲讲前面的火箭怎么实现。
首先找一个最简单的火箭,下面就是我的草图。就四个div,还有火箭的机舱,火焰,可以使用伪元素去实现。div能省则省。其实在之前中秋活动中写过火箭的实现,代码也有。我开火箭送嫦娥妹妹回月球
记录生活:
碰到的穿衣服拿着刀的可爱狗狗,超可爱。
以上是关于伪元素,这不是有手就行的主要内容,如果未能解决你的问题,请参考以下文章