• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

css ::before和::after的区别

CSS/HTML rin, seun 4个月前 (06-30) 64次浏览 0个评论

css ::before

CSS ::before选择器可用于在所选元素的内容之前插入内容。通过将其附加::before到要使用的元素来使用。

让我们看一些例子:

p::before { 
  content: "* ";
}

span.comment::before {
  content: "Comment: ";
  color: blue;
}
<p> To infinity, and beyond!</p>
<p> I am Buzz Lightyear. I come in peace.</p>

<span class="comment">May the force be with you.</span>
<br/>
<span> Do. Or do not. There is no try.</span>

在上面的示例中,我们在页面上每个段落元素之前加一个星号和一个空格。另外,我们在span类中的每个元素之前以蓝色添加“ Comment:” comment

css ::after

CSS ::after选择器可用于在一个或多个选定元素的内容之后插入内容。通过将其附加::after到要使用的元素来使用。

这里有些例子:

.buzz::after { 
  content: " - Buzz Lightyear";
  color: blue;
}

.yoda::after { 
  content: " - Yoda";
  color: green;
}
<p class="buzz"> To infinity, and beyond!</p>
<p class="yoda"> Do. Or do not. There is no try.</p>

在上面的示例中,我们将蓝色的“-Buzz Lightyear”附加到带有class的元素上buzz。另外,我们还会在类的元素后添加绿色的“-Yoda” yodacss ::before和::after的区别

单冒号与双冒号

关于使用伪元素的正确方法,有一些讨论,即:beforeCSS规范1和2中使用的旧样式单冒号()与CSS3建议的双冒号(::before),主要是为了“区分以下内容:伪类和伪元素”

但是出于兼容性原因,单冒号方法仍然被接受。请记住,IE8仅支持单冒号表示法。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址