伪元素 ::after 和 ::before 应用

什么是伪元素?

CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法是一样的。

常用的伪元素和伪类

伪元素和伪类的写法有点像,伪元素使用2个冒号,常见的有:

::before,::after,::first-line,::first-letter,::selection,::placeholder等;

伪类使用1个冒号,常见的有:

:hover,:link,:active,:target,:focus,:first-child, :first-of-type,:last-child,:last-of-type,:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type()等。

伪元素和伪类的区别

伪元素添加了一个页面中没有的元素(只是从视觉效果上添加了,不是在文档树中添加),伪类是给页面中已经存在的元素添加一个类(定义元素在某种状态下的呈现样式)。

伪元素 ::before 和 ::after 的用法

  1. 标准写法是双冒号(但考虑兼容性也有人写单冒号)
  2. ::before::after在被选中元素里面、元素现有内容之前(后)插入内容,需要使用content属性指定要插入的内容。content必须有值(空值也行)。
  3. content插入的内容默认是 inline 元素,可以通过display:block改变。

伪元素的特点

优点

  1. 不占用 DOM 节点,减少 DOM 节点数。
  2. 让 CSS 帮助解决了一部分 JavaScript 问题,简化了开发。
  3. 不仅块级元素可以设置伪元素,大部分行级元素也可以。
  4. 避免增加毫无意义的页面元素。

缺点

  1. 不利于调试。
  2. 伪元素不真正在文档内容中体现,只在视觉效果上体现,所以不能给伪元素添加具有实际意义的内容,这部分内容不会搜索引擎抓取。

content属性

content 的值可以是空值、字符串、attr()url()uri()counter()等,下面分别演示一下。

空值

可以用来清除浮动。代码如下:

.clearFix::after{
    clear: both;
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
}

包含 cleafFix 这个类的元素,其内部的浮动可以被清除。

string(字符串)

在电话号码前面添加一个电话的icon图标。代码如下:

HTML部分

<p class="phoneNumber">13900001390</p>
.phoneNumber::before{
    content:'\260E';
    font-size: 16px;
}

效果展示:

pseudo-element-01

小电话的图标是一个特殊字符,每个特殊字符都有特定代码,特定代码用在HTML中以 开头,用在 CSS 中以 \ 开头,用在 JS 中以 \u 开头。
比如这个电话图标,在 HTML 中用 &#9742 表示,在 css 中以 \260E 表示,在 JavaScript 中,以 \u260E 表示。

attr( ) 以及 url( )

attr():可以调用当前元素的某个属性。
url():可以引用媒体文件(比如图片)。

演示代码:

<a href="https://www.google.com">GOOGLE!</a>
a::before{
    content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-6211393811382272.3-law.gif");
}
a::after{
    content: "("attr(href)")";
}
a{
    text-decoration: none;
}

效果预览:

pseudo-element-02

例子中,content 中的 url 是引用媒体文件,所有不用加引号。
attr 是调用元素 href 属性当做字符串显示出来,所有要加引号。至于括号里面,如果加引号,就会显示出来 href 的值,如果不加引号就打印字符串 (attr(href)),我还不太清除加载括号里面的引号是什么用法。

counter 计数器

counter 调用计数器,可以不使用列表元素实现序号功能。
counter 要配合 counter-increment 和 counter-reset属性使用。

counter-reset 给同级元素增加计数器,比如一个页面有多个H1元素,那就给body加计数器。一个H1元素里面有多个H2元素,那就给H1元素加计数器。
counter-increment 增加计数器数值。

代码演示:

<body>
<h1>哺乳动物</h1>
<h2>狗</h2>
<h2>猴子</h2>
<h2>猩猩</h2>

<h1>冷血动物</h1>
<h2>鱼</h2>
<h2>蛇</h2>
</body>
body{
    counter-reset: section;
}
h1{
    counter-reset:subsection;
}
h1::before{
    counter-increment: section;
    content:counter(section)'、';
}
h2:before{
    counter-increment: subsection;
    content: counter(section)'.'counter(subsection)'、';
}

content的值什么时候加引号,什么时候不加

通过以上实例可以看出:

  1. 动态的(会变的值)不加引号。
  2. 媒体不加引号。
  3. 固定的值、字符串需要加引号。

From: segmentfault

评论