返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-伪元素

时间:2020-04-25 14:36来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

CSS伪元素用于向某些选择器添加特殊效果。您无需使用JavaScript或任何其他脚本即可使用这些效果。伪元素的简单语法如下-

selector:pseudo-element {property: value}

CSS类也可以与伪元素一起使用-

selector.class:pseudo-element {property: value}

最常用的伪元素如下-

序号 值与说明
1个

:第一行

使用此元素可将特殊样式添加到选择器中文本的第一行。

2

:首字母

使用此元素可以向选择器中文本的第一个字母添加特殊样式。

3

:之前

使用此元素可在元素之前插入一些内容。

4

:后

使用此元素可在元素之后插入一些内容。

:第一行伪元素

下面的示例演示如何使用:first-line元素向文档中的第一行元素添加特殊效果。

现场演示
<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         This line would not have any underline because this belongs to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

它将产生以下链接-

:first-letter伪元素

下面的示例演示如何使用:first-letter元素向文档中的元素的首字母添加特殊效果。

现场演示
<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         First character of this paragraph will be normal and will have font size 10 px;
      </p>
      
      <p>
         The first character of this paragraph will be 5em big as defined in the 
         CSS rule above. Rest of the characters in this paragraph will remain 
         normal. This example shows how to use :first-letter pseduo element 
         to give effect to the first characters  of any HTML element.
      </p>
   </body>
</html>

它将产生以下黑色链接-

:before伪元素

下面的示例演示如何使用:before元素在任何元素之前添加一些内容。

现场演示
<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

它将产生以下黑色链接-

:after伪元素

下面的示例演示如何使用:after元素在任何元素之后添加一些内容。

现场演示
<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

它将产生以下黑色链接-

 上一页  打印页面

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • CSS-伪元素

    CSS伪元素用于向某些选择器添加特殊效果。 您无需使用JavaScript或任何其他脚本即可使...

  • CSS-字体

    本章教您如何设置HTML元素中可用的内容字体。 您可以设置元素的以下字体属性- 该 FONT...

  • CSS-背景

    本章教您如何设置各种HTML元素的背景。 您可以设置元素的以下背景属性- 的 背景颜色 ...

  • CSS-语法

    CSS由样式规则组成,这些样式规则由浏览器解释,然后应用于文档中的相应元素。 样式规...

  • 什么是CSS?

    ascading tyle 小号 heets,被亲切地称为CSS,是一个简单的设计语言旨在简化制作网页...

  • css实现 横排二级下拉菜单

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR...

猜你感兴趣