【web学习笔记】034-伪元素选择器

liuzhengyuan · 发表于 2020-1-22 11:06:16

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 liuzhengyuan 于 2020-3-8 20:16 编辑

《零基础入门学习web开发》第35讲初学CSS的噩梦I | 学习笔记

先看这个代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>035-::first-line</title>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam explicabo hic perferendis dicta, quisquam repudiandae maxime dolor sit recusandae cumque at amet esse assumenda quibusdam praesentium culpa quos, nulla neque?</p>
<a href="https://ilovefishc.com">hello</a>
</body>
</html>

复制代码

效果：

1,::first-line
在head标签里加上

复制代码

就是这样：

这些伪元素选择器对<a>标签这类不起作用哦

2,::first-letter
跟 ::first-line 差不多，first-letter 就是给第一个字母设置样式.
加上

复制代码

首字母变大。

3,::before, ::after
在某个元素前或后插入

a::before {
content: url(https://xxx.ilovefishc.com/album/201904/15/144712l5r0iy5r5qc60r92.gif);
}
a::after {
content: "你好";
}

复制代码

效果：

4,::selection

复制代码

效果：

结束啦

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 【web学习笔记】034-伪元素选择器