您的位置：首页 > Web前端 > CSS

CSS伪类元素 ：after ：before

2016-11-28 00:00 591 查看
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。

在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active等）,

然而，无论你使用单冒号还是双冒号，浏览器都将能识别它们。由于IE8只支持单冒号的格式，安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧！

使用：

使用伪元素是相对容易的，:before 将会在内容之前“添加”一个元素而:after 将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用 content 属性。

<body>
<blockquote class="a">blockqupte 之间的所有文本都会从常规文本中分离出来，经常会在左、
右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。</blockquote>
</body>

<style>
blockquote:before {
content: "你好";
}
</style>

结果在前面插入你好。--但无法用鼠标选择你好， 这些元素实际上并不在文档中生成。它们将在外部可见，但是你将不会在文档的源代码中找到它们，因此，实际上它们是“虚假”的元素。

伪元素样式

尽管作为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。

<style>
blockquote:before {
content: open-quote; --------->前引号
font-size: 30px;
text-align: center;
color:crimson;
line-height: 60px;
background-color: blanchedalmond;
position: relative;
top:2px;

float:left;
}
</style>



指定伪元素尺寸

默认生成的元素是一个 内联元素，于是当我们想要指定它们的高度和宽度时，我们可以设display: block把它们声明为块级元素，或 display: inline-block;( 可以设置宽高的内联元素) 由于已经设置float，所以无需设置display:black

blockquote:before{
content:open-quote;
font-size: 30px;
text-align: center;
line-height: 42px;
color: crimson;
display: inline-block;
background-color: bisque;
position: relative;
top: 10px;
border-radius:25px;
height: 25px;
width: 25px;
}





也可以引入图片：

blockquote:before{
content: "";
display: inline-block;
height: 30px;
width: 30px;
background-image:url(img/2016-11-28_161639.png);
}

我们仍旧声明了content属性，而且此时使用了空字符串。content属性是必须的而且应该经常被应用。否则，伪元素无论如何都无法正常工作。

结合伪类--鼠标上浮变色

我们可以使用伪类连同伪元素一起放入一个CSS规则中，例如，如果我们希望当我们的鼠标移到blockqoute上时，引号的背景色能够略微变深

blockquote:hover:before{ background-color: coral;}

添加过度效果

blockquote:before{
content:open-quote;
font-size: 30px;
text-align: center;
line-height: 42px;
color: crimson;
display: inline-block;
background-color: bisque;
position: relative;
top: 10px;
border-radius:25px;
height: 25px;
width: 25px;
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航