伪元素(before after)的正确理解方式

RichardXG 发布于2019-08-19 17:30 / 3336人阅读

摘要：本文章专门学习先上总结伪元素可以随便用，因为它不干扰正常的页面元素。之前一直傻傻分不清什么是伪元素，什么是伪类。伪元素也有样式很搞笑的是，伪元素虽然很伪，但是却可以正常的设置样式背景文本大小，丫的页面上却什么都看不出。

本文章专门学习：after before

先上总结：

伪元素可以随便用，因为它不干扰正常的页面元素。

伪元素主要是用来实现一些华丽叼炸天的显示效果，而不是页面布局，当然 after+content 可以清除页面浮动.

感觉伪元素的用途其实比较的成熟或者固定，创新的用法通常正常人很难想出来，个人觉得只需要熟悉那些情景可以用，怎么用就可以。

之前一直傻傻分不清什么是伪元素，什么是伪类。

伪元素 :after,:before

伪类 :hover :active

参考资料

到底什么是伪元素

1.他们是假的元素，不存在的元素，更不是隐藏的元素
2.伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。

简单用法

:before This the main content. :after

在引用的之前和之后分别添加添加一个引号。

blockquote:before {
 content: open-quote;
}
blockquote:after {
 content: close-quote;
}

伪元素也有样式

很搞笑的是，伪元素虽然很伪，但是却可以正常的设置样式（背景、文本大小），丫的页面上却什么都看不出。

blockquote:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ffffd;
 float: left;
 position: relative;
 top: 30px;
 
}
blockquote:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ffffd;
 float: right;
 position: relative;
 bottom: 40px;
}

问题是：它能干嘛？ 关联背景图片

blockquote:before { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: left; position: relative; top: 30px; border-radius: 25px; background: url(images/quotationmark.png) -3px -3px #ffffd; display: block; height: 25px; width: 25px; } blockquote:after { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: right; position: relative; bottom: 40px; border-radius: 25px; background: url(images/quotationmark.png) -1px -32px #ffffd; display: block; height: 25px; width: 25px; } 结合伪类

blockquote:hover:after, blockquote:hover:before {
 background-color: #555;
}

添加过渡效果

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

三个酷到爆炸的DEMO

当然这里面需要一个重要的CSS3属性：box-shadow

CSS Box Shadow Effects - Demo
Image Stack Illusion
3D button

云服务器 GPU云服务器正确理解 linux正确伪静态伪元素获取伪元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78589.html

CSS（一）伪元素的巧用

摘要：并且，一些伪元素可以使开发者获取到不存在于源文档中的内容比如常见的还可以为伪元素定制样式。。中新增加的伪元素必须用伪类使用一个冒号例如。就本文而言，我们将把我们探讨的范围限制在和这两个伪元素的巧用上。作为一门前端er,你肯定熟知 a:hover a:visited.....我还记得在小本本上记着诀窍：love 与 hate 纠缠不休,大家都懂的吧。。。。伪类和...

entner 2019-08-30 15:53 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

Berwin 2019-08-01 18:04 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

hedzr 2019-08-29 13:53 评论0 收藏0