CSS: :before and :after 使用

CSS:before和:after属性是被称为pseudo元素的。它们用于在元素的内容之前或之后添加内容。这些pseudo元素有很多用途,我们将在这里探索其中的一些用法。

语法

如果我们有这样的元素:

<h2>welcome to our website</h2>

我们可以在使用CSS之前添加一个pseudo元素,比如:

h2:before {

content: “Hello“;

color : blue;

}

结果将是:

这是一个非常简单的原则。在某个元素之前或之后添加内容。在添加图标、清除浮动以及在许多其他情况下,它可能非常有用。pseudo元素的内容属性可以用空引号括起来:“”。这样,您就可以将pseudo元素当作一个没有内容的框。如果内容属性完全删除,pseudo元素将不起作用。

添加图标

在pseudo元素之前和之后最流行的用法可能是使用它们来添加图标。让我们看一下标记。

HTML:

<h2>Weather report</h2>

CSS:

h2:before {
    content: “ ”;
    display: block;
    height: 15px;
    width: 25px;
    url: (‘images/icon.png’’);
    margin-right: 5px;
}

结果将是:

现在我们已经成功地在文本前面添加了一个图标。容易,对吧?

Clearing Floats

在浮动元素之后,需要添加另一个元素以清除浮动。您可以通过使用pseudo one来避免添加新元素。

假设我们有这样的情况:

我们可以使用下面的代码来清除浮动。

HTML:

<div class="box-container">
    <div class=”box”></div>
    <div class=”box”></div>
</div>
<p>Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table.</p>

CSS:

.box-container:before,
.box-container:after {
    content: "";
    display: block;
}
.box-container:after {
    clear: both;
}
.box {
    height: 100px;
    width: 100px;
    background-color: #C98EED;
    margin: 5px;
    float: left;
}

现在,让我们看一下结果

通过使用此方法,我们将清除浮动,并将段落移动到两个元素之下。

使用背景图像

我们还可以向pseudo元素添加背景图像。这在设计标题时通常使用。

HTML:

<h2>Hello World</h2>

CSS:

h2:after {
    content: “”;
    width: 100%;
    height: 30px;
    background: url(‘underline.png’) center center no-repeat;
    display: block;
}

结果实现了:

浏览器支持

与CSS中的其他内容一样,需要检查浏览器支持。通过咨询我可以使用的服务,我们发现这些伪类具有很高的浏览器支持(超过98%),并且在使用它们时我们不会感到头痛。

总结

这里,我们解释了CSS伪元素的基本原理。这些例子说明了一些可能的用法。如果一开始还不完全清楚,不要担心,做点小练习吧。

希望本文将有助于你项目。感谢您的阅读!

原文发布于微信公众号 - 程序你好(codinghello)

原文发表时间:2018-05-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序之家

如何使用小程序媒体组件

图片,视频,音乐是小程序使用中不可缺少的部分,这篇文章中,我们将介绍小程序媒体组件的使用。媒体组件分为audio音频组件,image图像组件,video视频组件...

97510
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

24760
来自专栏编程

前端基础-CSS-2

上篇我们介绍了css的的由来和编写语法,并展示了一个基本的例子,这篇继续向大家展示一些例子来说明如何使用css来美化我们的页面展示,css包含非常多的样式设置,...

20160
来自专栏Google Dart

AngularDart Material Design 复选框 顶

用户可以点击该复选框以选中或取消选中它。 通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项,请避免使用单个复选框并使用material-...

12440
来自专栏大数据钻研

HTML 入门笔记 - 初识HTML

基础框架 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/ht...

46450
来自专栏河湾欢儿的专栏

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

11810
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

35650
来自专栏腾讯云商业智能分析团队的专栏

普通表格常见设置

表格组件是以表格的形式展现数据的载体,表格可以绑定任意一查询的多个字段。根据是否给字段使用统计函数来区分,可划分为细节数据表格和汇总表格。

22410
来自专栏我和未来有约会

Silverlight初级教程-动画

Silverlight初级教程 动画 在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。 ...

196100
来自专栏大前端开发

微信小程序中实现瀑布流布局和无限加载

瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

45220

扫码关注云+社区

领取腾讯云代金券