CSS中的伪元素简介

日期:2021-03-05 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

说白了,伪元素便是你的文本文档中若有实无的元素。
::first-letter伪元素

文件格式:

CSS Code拷贝內容到剪贴板
  1. e::first-letter  

示例:

CSS Code拷贝內容到剪贴板
  1. p::first-letter {font-size:300%;}  

    提醒:假如无需伪元素建立这个首标识符变大实际效果,务必手工制作给该字母再加标识,
    随后再为该标识运用款式。而伪元素具体上是替大家加上了无形中的标识。

::first-line伪元素

文件格式:

CSS Code拷贝內容到剪贴板
  1. e::first-line  

示例:

CSS Code拷贝內容到剪贴板
  1. p::first-line {font-variant:small-caps;}  

表明:选定文字段落(1般状况下是段落)的第1行。

::before和::after伪元素

文件格式:

CSS Code拷贝內容到剪贴板
  1. e::before   
  2. e::after  

示例:
对标识:

CSS Code拷贝內容到剪贴板
  1. <p class="age">25</p>  

加上以下款式:

CSS Code拷贝內容到剪贴板
  1. p.age::before {content:"Age: ";}   
  2. p.age::after {content:" years.";}  

会获得以下結果:

拷贝编码
编码以下:
Age: 25 years.

    提醒:假如标识中的內容是根据数据信息库查寻转化成的結果,那末用这类技能再适合但是了。
    由于全部結果全是数据,应用这两个伪元素能够在把数据展现给客户时,再加表明
    性文本。