训练营 坚持完成打卡任务 报名费全额返 更多>>
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
搜索
历史记录 清除记录
- 你还没搜索过喔。
点击刷新
把文本的第一个字母设为特殊的字母
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
把第一行文字设置为特殊
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>可以使用:first line伪元素向文本的第一行添加特殊效果。</p>
</body>
</html>
把第一行文字的第一个字母设置为特殊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>您可以组合：first letter和：first-line伪元素，为文本的第一个字母和第一行添加特殊效果！</p>
</body>
</html>
使用：在一个元素之前插入一些内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
h1:before {content:url(https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png);}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个标题：before伪元素在元素之前插入内容。</p>
<h1>这是一个标题</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>
使用：在一个元素之后插入一些内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
h1:after {content:url(https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png);}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>在伪元素插入元素后的内容。</p>
<h1>这是一个标题</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性。</p>
</body>
</html>
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)