CSS伪类元素：after ：before

时间 2020-03-22

标签 css 元素栏目 CSS 繁體版

原文原文链接

CSS中有一个特性容许咱们添加额外元素而不扰乱文档自己，这就是“伪元素”。web

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

然而，不管你使用单冒号仍是双冒号，浏览器都将能识别它们。因为IE8只支持单冒号的格式，安全起见若是你想要更普遍的浏览器兼容性那么仍是使用单冒号的格式吧！安全

使用：字体

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

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

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

伪元素样式

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

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

添加过分效果

CSS伪类元素 ：after ：before

伪元素样式

指定伪元素尺寸

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

CSS伪类元素：after ：before