伪元素的使用及实现效果

2017-08-17

百度解释

伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。

题外话：markdown中设置代码高亮显示的时候加上“esc下面的三个点”+语言名称可以是如下效果。

* 为什么要使用伪元素？我使用伪元素只是在父元素高度不确定，子元素又浮动显示的时候来清楚浮动的，通常都会这样使用。

element::after{
    display:block;
    content:'';
    clear:both;
}

我一般都是用一个冒号的，因为以前用的是webstorm，后来换了atom，自动就出现了两个冒号，查了一下，CSS2中伪类和伪元素都是使用一个冒号的，但是CSS3区分了伪类和伪元素，伪类使用一个冒号，伪元素使用两个冒号。 * 使用伪元素实现倒三角效果：实现的效果如图1所示： css实现对话框效果图

<div class="par_div"></div>
<br>
.par_div{
    position: relative;
    width:200px;
    height:50px;
    border: 1px solid #42ae93;
}
.par_div::before{
    position: absolute;
    left: 50%;
    margin-left: -18px;
    bottom: -18px;
    content: '';
    width: 0;
    border-width: 18px 18px 0;
    border-style: solid;
    border-color: white transparent transparent;
    z-index: 2;
}
.par_div::after{
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: -20px;
    content: '';
    width: 0;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #42ae93 transparent transparent;
}

* 伪元素实现标题形式实现的效果如图2所示： css实现标题效果图

<h3 class="title">
    <span>ABOUT ME</span>
</h3>
<br>
.title>span::before{
    display: block;
    content: '';
    position: absolute;
    left:0;
    width:95px;
    top:50%;
    border-top: 1px solid #e5e5e5;
}
.title>span::after{
    display: block;
    content: '';
    position: absolute;
    right:0;
    width:95px;
    top:50%;
    border-top: 1px solid #e5e5e5;
}

* 伪元素实现带图标标题实现的效果图如图三所示: 伪元素实现带图标标题效果图

<a href="#" class="cata_a">Beauty</a>
<br>
.cata_a::before{
    display: inline-block;
    content: '';
    width: 16px;
    height: 14px;
    background: url(../images/circle.png);
    background-size: 20px;
    background-position:left;
    background-repeat: no-repeat;
    padding-right: 20px;
}

* css实现带领结花的彩带效果实现的效果图如下图所示： css实现带领结花的彩带效果图

<h1 class="ribbon">
    <span class="ribbon-content">CSS3实现的彩带效果</span>
</h1>
<br>
.ribbon{
    display: block;
    font-size: 14px !important;
    font-family: 'microsoft yahei',Arial,sans-serif;
    font-weight: normal;
    max-width: 50%;
    position: relative;
    background: orange;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}
/* 彩带左右伪选择器生成的领结花 */
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #efb73e;
 z-index: -1;
}
/* 定位左边和右边的领结花 */
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
/* 生成领结阴影 */
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #999 transparent transparent transparent;
 bottom: -1em;
}
/* 定位阴影位置 */
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

---