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

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

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

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

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

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

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

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

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;
}

清除浮动

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

CSS是这样的：

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

模拟浮动：居中

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

创建一整套图标组件

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

更有效地使用可用空间

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

应用于华丽的排版

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

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;
}

创建一个全屏宽度的条

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

创建一个body的边框

用一个标准的左边框和右边框，以及一个在上和下固定定位的一个伪元素条。这样我们就可以在不用任何专门标记的情况下实现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;
}

做一个闪闪发光的按钮

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

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

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

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

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

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

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

使数据表格自适应

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

创建带样式的提示框

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

在导航项之间增加分隔符

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

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

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

创建一整套字体

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

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

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

2015.3.26

大量的用伪元素可以实现的奇妙效果相关推荐

详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
CSS 属性 - 伪类和伪元素的区别
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes : ...
css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
伪类选择器和伪元素选择器
我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下: 伪类选择器: 伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说&quo ...
css中伪类和伪元素有什么不一样
css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器,有时候我们用的是[:],有时候用的又是[::],有时候又好像两者都行,这到底是为什么呢?今天我们就来看看这两个东西到底有 ...
html伪类元素加图片,HTML中常见伪类和伪元素的区别
原标题:HTML中常见伪类和伪元素的区别提到伪类,在我的印象中最常用的不过是:hover.:active.:link.:visited,还有css3里的常用伪类选择器:last-child.:fir ...
css伪元素实现下划线
前言: css伪元素实现下划线效果,用一个border-bottom+伪元素实现双重下划线效果效果图: 实现代码: .titleT{position: relative;font-size: 28p ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...

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

大量的用伪元素可以实现的奇妙效果相关推荐

最新文章

热门文章