码迷,mamicode.com
首页 > Web开发 > 详细

CSS伪元素

时间:2020-08-19 19:19:47      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:pre   css伪元素   rap   内容   image   技术   transform   head   多个   

CSS伪元素

  • :first-line;

  • :first-letter

  • :before

  • :after


:first-line 伪元素

  • "first-line" 伪元素用于向文本的首行设置特殊样式。

<html>
<head>
<style type="text/css">
p:first-line 
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>
<body>
<p>
浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:第一行文字设置样式为红色,第二行为默认样式
</p>
</body>
</html>
技术图片

注释:"first-line" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-line" 伪元素:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

:first-letter 伪元素

  • "first-letter" 伪元素用于向文本的首字母设置特殊样式:

<html>
<head>
<style type="text/css">
p:first-letter 
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<p>
第一个文字设置样式
</p>
</body>
</html>
技术图片

注释:"first-letter" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-letter" 伪元素:

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align (仅当 float 为 none 时)
  • text-transform
  • line-height
  • float
  • clear

:before 伪元素

  • ":before" 伪元素可以在元素的内容前面插入新内容

<html>
<head>
<style type="text/css">
h1:before {content:"///////";
           color:red;
           font-size:small;}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
技术图片

:after 伪元素

  • ":after" 伪元素可以在元素的内容之后插入新内容。

<html>
<head>
<style type="text/css">
h1:after {content:".......";
           color:red;
           font-size:small;}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
技术图片

伪元素与 CSS 类

  • 伪元素可以与 CSS 类配合使用:

<html>
<head>
<style type="text/css">
p.article:first-letter{color: red;}
</style>
</head>
<body>
<p class="article">This is a paragraph in an article。</p>
</body>
</html>
技术图片

多重伪元素

  • 可以结合多个伪元素来使用。

<html>
<head>
<style type="text/css">
p.article:first-line{color: blue;}
p.article:first-letter{color: red;}
p.article:after
  {
  content:".....";
  font-size:xx-large;
  }
</style>
</head>
<body>
<p class="article">This is a paragraph in an article。</p>
</body>
</html>
技术图片
  • :first-letter与:before混合使用时:first-letter会失效

<html>
<head>
<style type="text/css">
p.article:first-line{color: blue;}
p.article:first-letter{color: red;}
p.article:before
  {
  content:"/////";
  font-size:xx-large;
  }
</style>
</head>
<body>
<p class="article">This is a paragraph in an article。</p>
</body>
</html>
技术图片

CSS伪元素

标签:pre   css伪元素   rap   内容   image   技术   transform   head   多个   

原文地址:https://www.cnblogs.com/wen-qing/p/13515070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!