大量的用伪元素可以实现的奇妙效果

ゝ一纸荒年。 2022-08-07 08:50 208阅读 0赞

译自https://css-tricks.com/pseudo-element-roundup/

**大量的用伪元素可以实现的奇妙效果**

用伪元素:before，:after你可以做出很多神奇的页面效果。对于页面上的所有元素，你得到了页面其他任何的一个html元素可以做到的效果外又添了额外的两个。它们解开了很多有趣的设计可能性但却并没有对你的语义标记产生负面影响。这里有大量的由这些伪元素做出的奇妙的效果。

![Center][]

因为可以绝对定位伪元素，而让其父元素相对定位。你可以认为是每个元素又额外地加了两层。对于此有很多的运用，比如多边形，模拟CSS3的多背景以及等高的列。

**用一个单一的元素来扩展各种不同的形状图形**

![Center 1][]

以上的所有这些形状以及更多其它的形状的实际构成都可以通过一个单一的元素来实现。而不是那些整齐干净却不实际的用1700个div做一个纯CSS的咖啡杯！

这里是一个六星形的例子：

![Center 2][]

CSS代码如下：

#star-six {
          width:0;
          height:0;
          border-left:50px solid transparent;
          border-right:50px solid transparent;
          border-bottom:100px solid red;
          position:relative;
    }
    #star-six:after {
          width:0;
          height:0;
          border-left:50px solid transparent;
          border-right:50px solid transparent;
          border-top:100px solid red;
          position:absolute;
          content:"";
          top:30px;
          left:-50px;
    }

**清除浮动**

![Center 3][]

我们可以用伪元素来清楚容器的浮动而不是插入额外的非语义标记。通常被称作是“clearfix”，在这里用了一个更语义化的“group”类名来替代。

CSS是这样的：

.group:before,
    .group:after {
       content:"";
        display:table;
    }
    .group:after {
        clear:both;
    }
    .group {
        zoom:1; /* For IE6/7 (trigger hasLayout) */
    }

**模拟浮动：居中**

![Center 4][]

浮动属性实际上并没有居中这个值，尽管我们也许有多么需要它。虽然有左浮动和右浮动，而利用占位符伪元素可以在两列之间空出一块区域，放置图片，我们可以模拟这样的效果。

**创建一整套图标组件**

![Center 5][]

Nicolas Gallagher再次把用伪元素创建多边形的概念推及到另一个应用，只是每次在至多两个元素上使用伪元素而不是图片来创建出一系列的图标。

**更有效地使用可用空间**

![Center 6][]

由CSS创建的效果也同样可以由CSS移除。我的意思是，伪元素可以通过媒体查询有条件地被应用或删除。也许当空间有限的时候，你会使用图标，而当有更多空间的时候，则可以用更多描述性的文字来替换。

**   应用于华丽的排版**

![Center 7][]

如果伪元素是文本，那么他们继承了父元素所用到的相同的排版样式。然而当在设置伪元素的内容时，也同样可以给它们单独设置样式。比如用一个不同的字体或不同的颜色，来使你的标题可以华丽地凸显出来。

CSS如下：

h2 {
         text-align:center;    
    }
    h2:before, h2:after {
        font-family:"Some cool font with glyphs", serif;
        content:"\00d7";  /* Some fancycharacter */
        color: #c83f3f;
    }
    h2:before {
        margin-right: 10px;
    }
    h2:after {
        margin-left: 10px;
    }

**创建一个全屏宽度的条**

![Center 8][]

如果需要创建一个这样的效果：元素的背景是铺满整屏，但是它的内容并不是，通常是用内部非语义的包裹元素或是重复且杂乱的间距申明。或者也可以用一个元素来限制内容的宽度，用伪元素让标题栏延展到页面的边缘来模拟出这样的效果。

**创建一个body的边框**

![Center 9][]

用一个标准的左边框和右边框，以及一个在上和下固定定位的一个伪元素条。这样我们就可以在不用任何专门标记的情况下实现body边框的效果。

Css如下：

body:before, body:after {
        content:"";
        position: fixed;
        background: #900;
        left: 0;
        right: 0;
        height: 10px;
    }
    body:before {
        top: 0;
    }
    body:after {
        bottom: 0;
    }
    body {
        border-left: 10pxsolid #900;
        border-right: 10pxsolid #900;
    }

**做一个闪闪发光的按钮**

![Center 10][]

如果制作一个由透明到白再由白到透明的渐变效果的伪元素块，把它定位在按钮标签的外部（用溢出隐藏的方式把它隐藏起来），并且用一个按钮滑过时的过度动作，你就可以得到一个鼠标经过按钮时会带放光效果的按钮。目前仅支持火狐，chrome26+以及IE10+。

**当一个特定的链接被触发时，页面淡出**

![Center 11][]

如果没有在一个元素上设定相对定位，那么被设置了绝对定位的伪元素就会定位于下个设置了相对定位的父元素。如果没有元素设置相对定位，那么它就会相对于根元素定位。你可以把它放在主元素下来制作一个占全屏窗口的元素，做出一个鼠标滑过链接时页面淡出的效果。

**制作一个像三维丝带一样的标题样式**

![Center 12][]

人人都喜爱丝带！看一下这个效果的html和css代码。在一些例子中比如需要一个额外的包裹元素来防止一个有透明背景属性的父元素下子元素效果的丧失中使用到了负的z-index数。

**给一个有序列表里的数字添加样式**

![Center 13][]

你是否试过给一个有序列表的序号添加样式？现在你不需要再做诸如用span来包裹内部元素，样式化列表项，然后去除掉带span标签的这个样式这种笨办法或是像其他用背景图片又或是去除掉列表样式然后放入到自己的序号中的这些疯狂的办法。所有的这些办法都不好。最佳的方法就是使用伪元素。

**使数据表格自适应**

![Center 14][]

大的数据表格在小屏幕浏览器上看效果是很糟糕的，无论是放大需要上下拖动或是把他们缩小之后难以阅读。我们可以用css的伪元素结合媒体查询来使得数据表格自适应，重新格式化让它在小屏幕上能更好地被阅读。

**创建带样式的提示框**

![Center 15][]

用html5的数据属性，使用这个属性并用伪元素来样式化它，这样我们就可以通过css来创建出一个完全自定义的提示框。

**在导航项之间增加分隔符**

![Center 16][]

如果想要区分导航项的内容，选择是有限的：可以添加边框（令人厌烦）或者也可以在每项之间添加额外的标签（同样令人讨厌）。而伪元素则能使用任何内容作为项目之间的间隔。

**不用html标签来建立一个完整的网站**

![Center 17][]

利用浏览器自动插入<html>，<head>及<body>等标签，Mathias Bynens展示了如何只用css及伪元素来创建一个网站。随着更多复杂的css技巧的诞生，这项技巧只有零的实际作用，但却任然奇妙无比！

**创建一整套字体**

![Center 18][]

为每一个字母使用一个html元素及伪元素，YusukeSugomori 用css创建了一整套字体被称作为CSS Sans。样例很美丽，能让你简单地一览Yusuke 使用来建立字母的各种聪明的技巧（如旋转，圆角，扭曲）。

尽管此字体只限于大写的拉丁字母，但仍然十分可爱。我想不出关于CSS Sans的实际用途，但该项目仍然是突破约束的一项伟大的创意示范。

译者：生如夏花  转载请注明出处

2015.3.26

[Center]: /images/20220805/d25f5c9a28cb4ab2a19f20f6ac09d82a.png
[Center 1]: /images/20220805/532eb029d4ca4992972450ef2035dd0f.png
[Center 2]: /images/20220805/736040d2cb8d41fe9b153b8777ee5e42.png
[Center 3]: /images/20220805/0a7cb428bfea4c5091ddabc3127a8cc3.png
[Center 4]: /images/20220805/3b94d32da4ee4c5e81ca0e5102a5c754.png
[Center 5]: /images/20220805/a1f2daa506ce451f93edae872d5307ba.png
[Center 6]: /images/20220805/e474196d399446699c22943f068b5838.png
[Center 7]: /images/20220805/77293be1c0294aac842c0a04d4a789c4.png
[Center 8]: /images/20220805/e4ac373a94074f8aa3826ac1ad898666.png
[Center 9]: /images/20220805/68be6b9b7921454d82c292e338c6d8b5.png
[Center 10]: /images/20220805/c756ad60c9fb41cfb07148fdbd87b5be.png
[Center 11]: /images/20220805/95cc190cc3124a09a6b81146f7b759c8.png
[Center 12]: /images/20220805/282dd5dc3c66452b86c1697e147d2dc8.png
[Center 13]: /images/20220805/70b32240d0fb400fb5121e156be00b3d.png
[Center 14]: /images/20220805/f4601ed50ab549089a40c94b72b6014e.png
[Center 15]: /images/20220805/11122c22941a48d68565bc32f74b0424.png
[Center 16]: /images/20220805/05f7770c7a664a349f4a878b15b7cee1.png
[Center 17]: /images/20220805/7f538c2eb3b744c5b49ca7a403fd89a6.png
[Center 18]: /images/20220805/d08d39caaeac46f781b6f001d885addb.png