伪元素选择器

一、任务目标

掌握伪元素选择器的应用

二、任务背景

伪元素选择器通过选择元素的某个部分，对元素的特定部分单独设置样式。伪元素是某个元素的子元素，是逻辑上存在的虚拟元素，但是实际并不存在与DOM树中。

三、任务内容

一个选择器只能使用一个伪元素，伪元素必须在基础选择器语句后使用

为了便于区分伪类选与伪元素，使用双冒号【::】作为伪元素选择符

伪元素	描述	示例
::after	用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素	p::after {      content: ＂结束＂; }
::before	用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素	p::before {      content: ＂开始＂; }
::first-line	向文本的首行添加样式，只能应用于块级元素	p::first-line {      color: #333; }
::first-letter	向文本的首字母添加样式，只能应用于块级元素	p::first-letter {      font-size: 16px; }
::marker	用于改变li元素的数字或符号的样式，只能作用于display属性值为list-item的元素	ul li::marker {      content: '*'; }
::placeholder	用于设置表单元素占位符文本的样式	input::placeholder {      color: blue; }

1、例：将li元素内容前的符号设置为‘星号’

 

1.1 代码示例

<style>
	ul li::marker {
		content: '★';
        }
</style>
<ul>
	<li>C1 见习工程师能力认证</li>
	<li>C4 专项工程师能力认证</li>
	<li>C5 全栈工程师能力认证</li>
</ul>