cssafter伪元素 CSS :first-letter 伪元素

cssafter伪元素

CSSafter伪元素是CSS中的一个重要特性，它可以让我们在不改变HTML结构的情况下，在元素后面添加一些内容。它可以用来创建一些有趣的效果，例如创建图标、添加背景图片、创建文本水印等。

CSSafter伪元素使用::after选择器来定义，语法如下：

selector::after { 
    content: ""; 
    display: block; 
    width: 100px; 
    height: 100px; 
}

content属性是必须的，它用来声明伪元素中要显示的内容。这个内容可以是文本、图片或者其他HTML元素。display属性用来声明伪元素的显示方式，width和height属性用来设置伪元素的尺寸。

CSSafter伪元素还可以使用background-image属性来设置背景图片：

selector::after { 
    content: ""; 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-image: url(image.jpg);   // 设置背景图片   }

此外，还可以使用background-repeat、background-position、background-size 等属性来调整背景图片的位置、大小、重复方式。

CSSafter伪元素也可以用于创建文本水印效果：

.watermark::after {   // 创建文本水印   content:"Watermark";   position:absolute;   top:-20px;   left:-20px;   font-size:30px;   color:#ccc;} 

上面代码中，我们使用content声明了要显示的文本内容“Watermark”，然后使用position、top、left 等属性将文本水印位于相应位置上。此外还可以使用font-size 和color 属性调整字体大小和颜色。

总之，CSSafter伪元素是一个很强大的工具，我们可以利用它来创造出很多有趣的效果。当然也要注意不要过度使用它，否则很容易对页面带来不必要的影响。

CSS :first-letter 伪元素

CSS :first-letter 选择器

完整CSS选择器参考手册

定义和用法

:first-letter选择器用来指定元素第一个字母的样式。

:first-letter是伪元素，它生成包含元素的第一个字母的伪元素。

:first-letter样式是元素的第一个字母。

任何引导标点符号都应与第一个字母一起设置样式。

在CSS2.1之前，:first-letter可以只附加到块级元素。CSS2.1扩展其范围，包括块，列表项，表调用，表标题和内联块元素。可以应用到首字母的属性是有限的。

例子：

h1:first-letter  {font-size: 166%;}
p:first-letter {text-decoration:  underline;}

提示: :first-letter选择器可以使用以下属性： 

• font properties
• color properties 
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if float is 'none')
• text-transform
• line-height
• float
• clear

注意: "first-letter" 选择器仅适用于在块级元素中.

---

实例

实例

每个 <p>元素的第一个字母选择的样式：

p:first-letter
{
  font-size:200%;
  color:#8A2BE2;
}

---

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器
::first-letter	1.0	9.0 部分从5.5	1.0	1.0	7.0 部分从5.5

注意: IE 5.5-8 and Opera 4-6 只支持旧的语法标准,single-colon CSS2语法(：first-letter)。新版本支持的标准,双冒号CSS3语法(::letter)。

---

相关文章

CSS 教程: CSS 伪类

---

完整CSS选择器参考手册