Day15 Pseudo Element 眼见不一定为真

什麽是伪元素(Pseudo Element)?

伪元素就如同它的名字一样，不是一个实际存在於网页里的元素，行为与表现却又和真正网页元素一样，使用时必须搭配一个CSS选择器来产生样式与效果(例如:改变第一个字的样式、新增内容...)。

伪元素(Pseudo Element)有哪些?

常见的有

• ::after
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::selection

参考资料:CSS - The ::selection Pseudo-element

伪元素的语法

最前面放选择器 後面加上伪元素

selector::pseudo-element {
  property: value;
}

例如:

p::first-letter {
  color: #ff0000;
  font-size: 50px;
}

参考资料:CSS Pseudo-elements

最常用到的两个伪元素: ::before 和 ::after

::before 是在原本的元素「之前」建立一个新的元素
::after 则是在原本的元素「之後」建立一个新的元素。

使用::before和::after时，要搭配 content这个属性来插入要新增的内容

例如:

<p>You’re not early.</p>

p::before {
	content: "Youre not late.";
    color: palevioletred;
	background-color:burlywood;
    font-weight: bold;
}

p::after{
	content: "You are very much ON TIME, and in your TIME ZONE destiny set up for you.";
    color: lightseagreen;
	background-color:lightgrey;
    font-weight: bold;
}

伪元素(Pseudo Element)和伪类(Pseudo Class)的差异?

• 伪元素使用两个冒号「::」开头，而伪类使用一个冒号「:」开头。
• 伪元素和伪类的使用方式是一样的，都是搭配一个CSS选择器来产生样式上的变化，唯一的差异是伪元素的效果是像新增了一个新的HTML元素(其实并不存在於DOM上)到网页上，而伪类则是在原有的HTML元素新增在特定状态时才会出现的样式效果。

参考资料:Pseudo-classes and pseudo-elements
::before & ::after 无中生有的僞元素选取器 - 杰克这真是太神奇啦
图片来源:unsplash

以上为个人学习笔记整理
若有错误，欢迎指正